?

總結(jié)幾種自己比較容易混淆的：

1. 后代選擇器，寫法是 E1 E2，如 ul li，選擇的是所有后代，包括子后代、孫后代…;

2. 子選擇器，寫法 E1 > E2，只選擇子后代，不包括孫后代元素；

3. 相鄰元素選擇器，寫法 E1 + E2，選擇緊跟著E1的E2元素，只會選擇一個元素，如果E1、E2不是緊挨著的不會匹配到；

4. 兄弟選擇器， 寫法 E1 ~ E2 ，選擇E1后面的所有E2類型的元素，在E1簽名的E2不會匹配到；

5. 屬性選擇器：

E[attr] : 只要有attr屬性將被選擇，

E[attr^=value] : 選擇屬性attr值以value開頭的元素，

E[attr$=value] : 選擇屬性attr值以value結(jié)尾的元素，

E[attr*=value] : 選擇屬性attr值中含有value的元素，

E[attr~=value] : 選擇attr值以空格分隔后的列表中有value的元素，

E[attr|=value] : 選擇屬性值為value或者為 value- 開頭的元素。

6. 偽類

：link 沒有訪問時,在href屬性有值時才有效果

：vistied 訪問過后

：hover 鼠標停留時

：active 鼠標點擊時，僅在鼠標按住時觸發(fā)，鼠標松開消失

：focus 成為焦點時

表單類，主要在表單元素使用：

enabled：可用狀態(tài)

disabled：不可用狀態(tài)

checked、selected 選中

7. ：nth 類型選擇器，

:first-child選擇某個元素的第一個子元素；

:last-child選擇某個元素的最后一個子元素；

:nth-child()選擇某個元素的一個或多個特定的子元素；

:nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算；

:nth-of-type()選擇指定的元素；

:nth-last-of-type()選擇指定的元素，從元素的最后一個開始計算；

:first-of-type選擇一個上級元素下的第一個同類子元素；

:last-of-type選擇一個上級元素的最后一個同類子元素；

:only-child選擇的元素是它的父元素的唯一一個了元素；

:only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素；

:empty選擇的元素里面沒有任何內(nèi)容。

first-child 和 first-of-type的區(qū)別： first-child選中的元素必須是在子元素中的第一位；first-of-type選中的元素是子元素中某種類型元素的第一個，而不管子元素在父元素的位置。

?

8. 偽元素

::before 在元素內(nèi)部前面插入，結(jié)合content ，插入content的內(nèi)容；

::after 在元素內(nèi)部后面插入，結(jié)合content，插入content的內(nèi)容；

::first-letter 首字母，常用與段落，改變一行文字的首個字母；

::first-line 首行

::selection 鼠標劃過區(qū)域的樣式，常用與鼠標選擇某段位子時改變默認的樣式。

轉(zhuǎn)載于:https://www.cnblogs.com/hu-liang/p/5125899.html

總結(jié)

以上是生活随笔為你收集整理的CSS选择器总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。