网页开发过程中，我们需要定义很多class来应用到不同的元素上，由于class本身是没有语义而且是可以复用的，所以过度使用class会使得整个样式表结构非常混乱。为了减少class的使用频度，需要尽可能的使用选择器来指定元素。而且使用选择器还可以定义很多规则，这样也可以减少重复定义class的代码量。
在CSS3中，主要有以下几种选择器：属性选择器、结构性选择器、UI状态选择器、通用兄弟元素选择器。下面分别介绍一下：
（一）属性选择器
顾名思义，属性选择器就是根据各种属性来选定目标的。通常我们还会结合通配符来使用属性选择器。表达式为：[attr=val] {样式内容}，常用通配符有以下3个：
1) [ attr*=val ] 返回'attr'属性中包含val字符串的所有元素。如[id*=section]可选中#section1、#subsection，不能选中sec-tion。
2) [ attr^=val ] 返回'attr'属性以val字符串开头的所有元素。如[id*=section]可选中#section1、不能选中#subsection。
3) [ attr$=val ] 返回'attr'属性以val字符串结尾的所有元素。如[id*=section]可选中#subsection、不能选中#section1。
属性选择器规则简单，但是使用非常灵活多变，恰当使用可以对代码起到很好的精简。
（二）结构性选择器
在CSS中，除了我们自定义的类选择器外，还有CSS已经定义好的选择器，如a元素上的a:link, a:visited, a:hover, a:active这些状态伪类。可以结合类来使用，表达式：选择器 类名：伪类/伪元素{样式内容}。在CSS中结构性选择器如下（引自http://HdhCmsTestw3school测试数据.cn/）：
选择器 例子 例子描述 CSS first-line p:first-line 选择每个元素的首行。 1 :first-letter p:first-letter 选择每个
元素的首字母。 1 :before p:before 在每个
元素的内容之前插入内容。 2 :after p:after 在每个
元素的内容之后插入内容。 2 :root :root 选择文档的根元素。 3 :empty p:empty 选择没有子元素的每个
元素（包括文本节点）。 3 :target #news:target 选择当前活动的 #news 元素。 3 :not(selector) :not(p) 选择非
元素的每个元素。 3 :first-child p:first-child 选择属于父元素的第一个子元素的每个
元素。 2 :last-child p:last-child 选择属于其父元素最后一个子元素每个
元素。 3 :only-child p:only-child 选择属于其父元素的唯一子元素的每个
元素。 3 :nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。 3 :nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。 3 :first-of-type p:first-of-type 选择属于其父元素的首个
元素的每个
元素。 3 :last-of-type p:last-of-type 选择属于其父元素的最后
元素的每个
元素。 3 :only-of-type p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。 3 :nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个
元素的每个
元素。 3 :nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 3
这里选一些常用的有内容的选择器来说一下。
1)befor和after选择器：通常会配合content使用，在被选元素内（添加到该元素内的innerHTML）的前后添加content。
1 2 3 4 5 各种选择器 6 7 h2:after { 8 content: "（在后面添加文字，可以指定样式）"; 9 color: blue;10 }11 12 13 14 显示效果：
15 16
第一个标题
17 第1个段落
18 第二个标题
19 第2个段落
20 第三个标题
21 第3个段落
22
查看更多关于CSS3基础学习之选择器篇_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111803