CSS3选择器

CSS3选择器（最全）

（1）关系选择符
①包含选择符（E F）
包含选择符将会选中所有符合条件的后代，包括儿子，孙子，孙子的孙子…
②子元素选择符（E>F）
子选择符只能选中子元素，而不能选中孙辈。
③相邻选择符（E+F）
相邻选择符只会选中符合条件的相邻的兄弟元素。
④兄弟选择符（E~F）
兄弟选择符会选中所有符合条件的兄弟元素，而不强制是紧邻的元素。

（2）属性选择器
①E[attr]
选择具有attr属性的E元素
例如：

1

2

3

此例，将会选中所有div，因为匹配到了class属性，且属性值中都包含了b
3）结构性伪类
①E:first-child
匹配父元素的第一个子元素E
②E:last-child
匹配父元素的最后一个子元素E
③E:only-child
匹配父元素仅有的一个子元素E
说明：
要使上述属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
④E:nth-child(n)
匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。(n从1开始)
说明：a）要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
b）该选择符允许使用一个乘法因子(n)来作为换算方式：比如我们想选中所有为3的倍数的子元素E:nth-child(3n)
c）该选择符允许使用一些关键字，比如：odd, even
⑤E:nth-last-child(n)
匹配父元素的倒数第n个子元素E。(其他用法同:nth-child(n))
⑥E:first-of-type
匹配同类型中的第一个同级兄弟元素E。
⑦E:last-of-type
匹配同类型中的最后一个同级兄弟元素E。
⑧E:only-of-type
匹配同类型中的唯一的一个同级兄弟元素E。
⑨E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E。(n的操作同nth-child)
⑩E:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E。
⑪E:empty
匹配没有任何子元素（包括text节点）的元素E。
（4）伪类选择器
css中已经定义好的选择器，不能随便起名字
回顾：①E:link 设置超链接a在未被访问前的样式。
②E:visited 设置超链接a在其链接地址已被访问过时的样式。
③E:hover 设置元素在其鼠标悬停时的样式。
④E:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
新增：①E:checked
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
②E:enabled
匹配用户界面上处于可用状态的元素E。
③E:disabled
匹配用户界面上处于禁用状态的元素E。
④E:target
匹配相关哈希值指向的E元素
⑤E:not(s)
匹配不含有s选择符的元素E。
⑥E::selection
给E元素设置选中样式
（4）伪元素选择器
是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器
用法：选择器：伪元素{属性：值}
回顾
①:first-line
用于为某个元素的第一行文字使用样式
②:first-letter
用于为某个元素的第一个文字使用样式删除线格式
“伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。
说明：①插入的元素在默认情况下是内联元素
②因此，为了给插入的元素赋予高度，填充，边距等等，你通常必须显式地定义它是一个块级元素：display:block;
③:before和:after伪元素注入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后