## :-: 不常用
```
---------- 不太常用 ----------
選中div下一個兄弟元素節點p、
div + p {
background: red;
}
選中div下面所有為p的兄弟元素節點p,并列結構下、
div ~ p {
background: red;
}
選中屬性值包含a(兩邊有單詞邊界)的元素、
div[data~="a"] {
background: red;
}
選中 a 開頭,或者 a- 開頭的元素、
div[data|="a"] {
background: red;
}
選中以a開頭的元素、
div[data^="a"] {
background: red;
}
選中以a結尾的元素、
div[data$="a"] {
background: red;
}
選中只要包含a的任意元素、
div[data*="a"] {
background: red;
}
---> 兼容性差、改變input提示顏色、
input::placeholder {
color: red;
}
改變字體文本選中后的樣式、
div::selection {
只能設置三個樣式
color: red;
background-color: red;
text-shadow: red; -- 陰影
}
```
```
----------> 偽類選擇器、(被選中元素的一種狀態)
E:not(s) 選中除了最后一個 :last-of-type 的所有li元素、
ul li:not(:last-of-type) {
border-bottom: 1px solid red;
}
選中 跟標簽、相當于html 絕對最父級、
:root{
background-color:red;
}
被錨點觸發的狀態樣式、<a href="#div">點擊后</a>
div:target{
color: red;
}
li --> 選中同級下·第一個
ul > li:first-child {}
li --> 選中同級下·最后一個
ul > li:last-child {}
選中ul里面只有單獨一個的li (獨生子)
ul > li:only-child {
color: red;
}
選中指定的li、(css索引從1開始)
ul > li:nth-child(3) {
color: red;
}
選中奇數的li、(css索引從1開始、但n是自然數,它是從0開始的)
或者 :nth-child(add)
ul > li:nth-child(2n+1) {
color: red;
}
選中偶數的li、
或者 :nth-child(even)
ul > li:nth-child(2n) {
color: red;
}
倒過來,選中最后一個、
ul > li:nth-last-child(1) {
color: red;
}
---------- 以上都考慮其他元素,對它的影響、比如說選中第一個 li:nth-child(1) 但同級元素下第一個實際為span標簽、那么不會選到、
```
## :-: 較常用
```
----------> 比較常用
該類型 li 的第一個、
ul > li:first-of-type{ color: red; }
該類型 li 的最后一個、
ul > li:last-of-type{ color: red; }
該類型 li 在同級下只有一個時選中、(獨生子、特有)
ul > li:only-of-type{ color: red; }
該類型 li 的指定個、
ul > li:nth-of-type(3){ color: red; }
ul > li:nth-of-type(add){ color: red; }
ul > li:nth-of-type(even){ color: red; }
選中從2開始,到最后一個的、
ul > li:nth-of-type(n+2){ color: red; }
選中div標簽為空節點的、<div></div> <div><!-- 注釋在css中不算節點,但空格算 --></div>
div:empty{
background-color: red;
}
當前input是復選框、這個實例是點擊input觸發checked狀態的css,
當前input:checked+span在被觸發時就可以選中下一個為span的標簽了,并且利用它改變css樣式、
input:checked + span{
background-color: red;
}
input:checked + span::after{
content:" Hello Wrold~ ";
color: #ccc;
}
disabled是選中被禁止狀態的標簽, <input type="text" disabled>
input:disabled{
background-color: red;
}
選中被禁止修改狀態的標簽、 <input type="text" readonly value="這個是禁止修改的狀態。可以選擇,但不能刪改(只讀)">
input:read-only{
color: red;
}
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request