CSS选择器总结

 

总结几种自己比较容易混淆的：

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结尾的元素，

E[attr*=value] : 选择属性attr值中含有value的元素，

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

E[attr|=value] : 选择属性值为value或者为 value- 开头的元素。

6. 伪类

：link 没有访问时,在href属性有值时才有效果

：vistied 访问过后

：hover 鼠标停留时

：active 鼠标点击时，仅在鼠标按住时触发，鼠标松开消失

：focus 成为焦点时

表单类，主要在表单元素使用：

enabled：可用状态

disabled：不可用状态

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选择的元素里面没有任何内容。

first-child 和 first-of-type的区别： first-child选中的元素必须是在子元素中的第一位；first-of-type选中的元素是子元素中某种类型元素的第一个，而不管子元素在父元素的位置。

 

8. 伪元素

::before 在元素内部前面插入，结合content ，插入content的内容；

::after 在元素内部后面插入，结合content，插入content的内容；

::first-letter 首字母，常用与段落，改变一行文字的首个字母；

::first-line 首行

::selection 鼠标划过区域的样式，常用与鼠标选择某段位子时改变默认的样式。