CSS（1、2）与CSS3中的选择器

大家都知道css有三个简单常用的选择器，#id、class和标签选择器。但是css3又新增了一些选择器，可以减少结构代码中ID属性和class属性的定义。使用它们可以减少不少冗杂的代码，便捷开发。下面介绍：

一.元素选择符 Element Selectors

选择符	名称	版本	描述
*	通配选择符(Universal Selector)	CSS2	所有元素对象
比如 p、h1、div、a，甚至可以是 html 本身.	元素选择器	CSS1	最常见的 CSS 选择器是元素选择符。换句话说，文档的元素就是最基本的选择器
#id	id选择符(ID Selector)	CSS1	以唯一标识符id属性作为选择符，给元素对象添加样式
.class	class选择符(Class Selector)	CSS1	以.class名作为选择符，给元素对象添加样式

二.关系选择符 Relationship Selectors

选择符	名称	版本	描述
ul li	后代选择符	CSS1	后代选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子…
ul>li	子代选择符	CSS2	与后代选择符(ul li) 不同的是，子选择符只能命中子元素，而不能命中孙辈。
E+F	相邻选择符	CSS2	与兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）
E~F	兄弟选择符	CSS3	兄弟选择符都是往后找，但是只找一个兄弟，而且这个兄弟必须是紧紧挨着的

三.属性选择符Attribute Selectors

选择符	名称	描述
a[class]	CSS2	选择具有class名的a标签
input[type=\”text\”]	CSS2	将会命中input标签中带有了type属性，并且属性值为text的符合条件的标签
div[class~=\”a\”]	CSS2	将会命中div中class名为a的元素
li[class^=\”a\”]	CSS3	选择具有class名且class名为以a开头的字符串的li标签,只要以a开头的class名都会被选中
li[class$=\”a\”]	CSS3	选择具有class名且class名为以a结尾的字符串的li标签,只要以a结尾的class名都会被选中
li[class*=\”a\”]	CSS3	选择具有class名且class名包含a的字符串的li标签,只要包含a的class名都会被选中
li[class\|=\”a\”]	CSS3	选择具有class名且class名包含a开头并用连接符\”-\”分隔的字符串的li标签，如果class仅为a，也将被选择。

1.div[class^=\”a\”]选择具有class名且class名为以a开头的字符串的div,只要以a开头的class名都会被选中
此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>div[class^=\"a\"] {background-color: red;}</style></head><body><class=\"abc\">1</div><div class=\"acb\">2</div><div class=\"bac\">3</div></body></html>

2.div[class$=“a”]选择具有class名且class名为以a结尾的字符串的div,只要以a结尾的class名都会被选中
此例，将会命中第三个div，因为匹配到了class属性，且属性值以a结尾

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>div[class$=\"a\"] {background-color: red;}</style></head><body><div class=\"abc\">1</div><div class=\"acb\">2</div><div class=\"bca\">3</div></body></html>

3.div[class*=“a”]选择具有class名且class名包含a的字符串的div,只要包含a的class名都会被选中
此例，将会命中三个div，因为匹配到了class属性，且属性值中都包含了a

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>div[class*=\"a\"] {background-color: red;}</style></head><body><div class=\"abc\">1</div><div class=\"acb\">2</div><div class=\"bca\">3</div></body></html>

4.div[class|=“a”]选择具有class名且class名包含a开头并用连接符\”-\”分隔的字符串的div，如果class仅为a，也将被选择。
在这个例子中，前2个div将会被命中：
第1个div，拥有class属性，值是a开头并紧跟着连接符“-”，所以被命中
第2个div，拥有class属性，并且值为a，所以被命中；

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>div[class|=\"a\"] {background-color: red;}</style></head><body><div class=\"a-bc\">1</div><div class=\"a\">2</div><div class=\"abc\">3</div></body></html>

四.伪类选择符Pseudo-Classes Selectors

选择符	名称	描述
E:not(s)	CSS3	匹配不含有s选择符的元素E。
E:root	CSS3	匹配E元素在文档的根元素。
E:first-child	CSS3	匹配父元素的第一个子元素E。
E:last-child	CSS3	匹配父元素的最后一个子元素E。
E:only-child	CSS3	匹配父元素仅有的一个子元素E。
E:nth-child(n)	CSS3	匹配父元素的第n个子元素E。
E:nth-last-child(n)	CSS3	匹配父元素的倒数第n个子元素E。
E:first-of-type	CSS3	匹配父元素下第一个类型为E的子元素。
E:last-of-type	CSS3	匹配父元素下的所有E子元素中的倒数第一个。
E:only-of-type	CSS3	匹配父元素的所有子元素中唯一的那个子元素E。
E:nth-of-type(n)	CSS3	匹配父元素的第n个子元素E。
E:nth-last-of-type(n)	CSS3	匹配父元素的倒数第n个子元素E。
E:empty	CSS3	匹配没有任何子元素（包括text节点）的元素E。
E:checked	CSS3	匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled	CSS3	匹配用户界面上处于可用状态的元素E。
E:disabled	CSS3	匹配用户界面上处于禁用状态的元素E。
E:target	CSS3	匹配相关URL指向的E元素。

1.E:not(s)匹配不含有s选择符的元素E。
在这个例子中，1和3div都会被选中，因为匹配不含有class名为a的div

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>div:not(.a) {background-color: red;}</style></head><body><div class=\"a-bc\">1</div><div class=\"a\">2</div><div class=\"abc\">3</div></body></html>

2.E:first-of-type匹配父元素下第一个类型为E的子元素。
此时 .demo 的第1个元素并没有被匹配到，而是匹配到了第3个子元素，因为第3个子元素正好是 .demo 的第1个span子元素

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>.demo span:first-of-type { color: #f00; }</style></head><body><div class=\"demo\"><p>p1</p><p>p2</p><span>span1</span><p>p3</p><span>span2</span></div></body></html>

3.E:empty匹配没有任何子元素（包括text节点）的元素E。
此例：第一个p标签和第三个p标签都有文本节点,第二个p标签只有注释节点，所以命中第二个p标签

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>p:empty {height: 25px;border: 1px solid #ddd;background: rgb(255, 0, 0);}</style></head><body><div class=\"test\"><p>结构性伪类选择符 E:empty</p><p><!--我是一个空节点p，请注意我与其它非空节点p的外观有什么不一样--></p><p>结构性伪类选择符 E:empty</p></div></body></html>

五.伪对象选择符 Pseudo-Element Selectors

选择符	名称	描述
E:first-letter/E::first-letter	CSS1/3	设置对象内的第一个字符的样式。
E:first-line/E::first-line	CSS1/3	设置对象内的第一行的样式。
E:before/E::before	CSS2/3	设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after	CSS2/3	设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::placeholder	CSS3	设置对象文字占位符的样式。
E::selection	CSS3	设置对象被选择时的颜色。