CSS3选择器
- Relationship Selectors：关系型选择器
- Attribute Selectors：属性选择器
- Pseudo-Element Selectors:伪元素选择器
一、Relationship Selectors:关系型选择器
1. E + F : 选择E的下一个兄弟元素并且满足条件F
1 /* Relationship Selectors：关系型选择器 */ 2 /* e + f */ 3 /* e、f分别表示为两个元素： e + f 的CSS选择器所表示的是“e的下一个满足条件的兄弟元素f” */ 4 /* 通俗的说就是e的下一个兄弟元素，而且必须是紧挨着的，并且符合f的选择条件的元素 */ 5 div + p{ 6 background-color: red; 7 }
能匹配（E + F）的代码:
1 <div> div </div> 2 <p> p </p>
不能匹配（E + F）的代码：
1 <div> div </div> 2 <ul> ul </ul> 3 <p> p </p>
E和F除了是示例中的元素选择器，可以是任意其他选择器，比如类选择器，ID选择器。
2. E ~ F :选择E元素下面的符合F选择条件的同级兄弟元素。
1 div ~ p{ 2 background-color: red; 3 }
能否匹配请看代码后面的注释：
1 <p> p </p><!-- 不能匹配 --> 2 <div> div </div> 3 <ul> ul </ul> 4 <p> p </p><!-- 能匹配到 -->
所以，前面的e + f不能匹配下面的p标签。(e和f这种关系可以用js的一种数据结构来表示就是：同处于一个集合(数组)下的元素，f的索引值大于e的索引值)
1 <p> p </p><!-- div + p 选择器不能匹配这个p元素 --> 2 <div> div </div>
二、Attribute Selectors：属性选择器
- CSS2属性选择器与并列选择器
- CSS3属性选择器
1. 在前面的一篇css选择器中就有介绍属性选择器，但是没有具体分析和示例说明，下面就通过一些示例来一一介绍属性选择器。通常我们的属性选择器会这么用。
1 div[data]{ 2 background-color: red; 3 }
上面这是属性选择器吗？严格来说，这叫做并列选择器。是由div标签选择器和[data]属性选择器组合而成的并列选择器，所表达的意思是同时符合这两个选择条件的元素。所以CSS2的属性选择器是下面这样的：
[data]{ background-color: red; }
很少能见到吧，不是很少，是在开发中几乎看不到这种写法，但它就是纯粹的CSS2的属性选择器，它可以匹配下面示例中的所有元素：
1 <div data="a">a</div> 2 <div data="a b">b</div> 3 <span data="">span</span> 4 <p data="cc">ppp</p>
2. CSS2中还有两个属性选择器：[attr ~="val"]、[attr |= "val"]。
/* [attr~="val"] 表示匹配执行属性attr中含有指定属性值var的元素 */ [data ~="a"]{ background-color: red; } <div data="a">a</div><!--匹配--> <div data="a-b">b1</div><!--不匹配--> <div data="a b">b2</div><!--匹配--> <div data="a b c">c</div><!--匹配-->
[attr |="val"] 表示匹配attr属性且其属性值是"val"或者“var-..."的元素，省略号表示中划线后面可以带有字符，但不能是空格，因为空格表示是间隔两个属性值的符号。（这里的val表示的是属性具体的值）
1 [data |="a"]{ 2 background-color: red; 3 } 4 <div data="a">a</div><!--匹配--> 5 <div data="a-b">b1</div><!--匹配--> 6 <div data="a b">b2</div><!--不匹配--> 7 <div data="a b c">c</div><!--不匹配--> 8 <div data="aaa">a</div><!--不匹配--> 9 <div data="a-bbbbb">a</div><!--匹配--> 10 <div data="aa">a</div><!--不匹配--> 11 <div data="aaa">a</div><!--不匹配-->
3. CSS3中的属性选择器：[attr ^= "val"]、[attr $="val"]、[attr !="val"]、[attr *="val"]这四个我就不一一介绍了，如果你懂的正则表达式就知道怎么用的了。（注意的是val表示的不是取某个值，而是将整个属性的字符串作为一个值来匹配的。val表示某个或者某段字符。）
三、Pseudo-Element Selectors:伪元素选择器
回顾：为元素选择器在CSS2中有e::first-letter(首字母)、e::first-line(首行)、e::before(元素前添加内容)、e::after(元素后添加内容，常被用于清除浮动)
CSS3为元素选择器：e::placeholder、e::selection。【最新版浏览器都已经兼容，但是实际开发规范中可能不允许用，根据公司开发规范而定。】
e::placeholder可以定义input 属性placeholder产生的提示文本的颜色，也就是说这个选择器中只能写color样式。
e::selection用来定义元素文本被选中时的样式，只能设置color,background-color,text-shadow(阴影)。
实际开发中很少用到这些选择器，但是因为很少用到就有可能是个坑，大家自己看着办，最后友情建议严格按照开发规范开发。
四、pseudo-Classes Selectors:伪类选择器
- e:not(s)-----------“not”表示除xxx以外
- e:root--------------“root”表示跟标签选择器
- e:target-----------“target“当某个元素的id值被location.hash作为值时（<a href="#demo">demoA</a>当点击这个a标签时，页面上id为demo的元素样式由e:target指定的样式）
这三个伪类选择器的兼容性都是IE6~8不支持。日常应用比较多或者用来设计特定应用场景时使用。
e:not(s)：本质上就是一种筛选，只不过是反向筛选而已，先通过e匹配一系列元素集合，然后通过not(s)将这一系列元素集合中匹配s的的元素去掉。引用场景有一组列表框最后一个不需要设置下边框。
1 <!--html--> 2 <ul> 3 <li>demo</li> 4 .....这里n个li 5 <ul> 6 <!--css--> 7 ul{ 8 border: 1px solid red; 9 } 10 li{ 11 list-style: none; 12 } 13 li:not(:last-of-type){/*:last-of-type表示最后一个元素*/ 14 border-bottom: 1px solid #888; 15 }
e:root：根标签选择器，很多时候被看作是选择HTML标签，要是在xml文件中呢？人家:root还是作用根标签，通常在应用时是直接写:root，e会被省略，因为e在伪类中表示的就是后面伪类作用的范围。这里暂时不演示:root的使用示例，后面会有结合其not和target的一个综合demo。
e:target：结合前面的解析，实质上可以描述为:target选择的是被锚定的元素。这种口头的描述很抽象，来个not、root、target综合小demo。
需求：通过not、root、target伪类选择器实现三个按钮切换背景颜色。
1 <!--html--> 2 <div class="wrapper"> 3 <a href="#red">red</a> 4 <a href="#green">green</a> 5 <a href="#orange">orange</a> 6 </div> 7 <div id="red"></div> 8 <div id="green"></div> 9 <div id="orange"></div> 10 <!--css--> 11 <style> 12 *{ 13 margin: 0; 14 padding: 0; 15 } 16 :root, 17 body{ 18 height: 100%; 19 } 20 div[class]{ 21 position: absolute; 22 margin-top: 10px; 23 margin-left: 10px; 24 width: 400px; 25 height: 80px; 26 padding-left: 50px; 27 border-radius: 5px; 28 border: 1px solid #888; 29 } 30 div:not(.wrapper){ 31 width: 100%; 32 height: 100%; 33 } 34 #red{ 35 background-color: red; 36 } 37 #green{ 38 background-color: green; 39 } 40 #orange{ 41 background-color: orange; 42 } 43 div[id]:not(:target){ 44 display: none; 45 } 46 </style>
- e:first-child--------------如果父元素下第一个元素是e就匹配这个e
- e:last-child--------------如果父元素下最后一个元素是e就匹配这个e
- e:only-child--------------如果父元素下是唯一一个e就匹配这个e
- e:nth-child(n)-----------查找父元素下的第n个元素是否是e，如果是e就匹配。n从0开始计数，但css从1开始（css查数规则使用自然数，即1，2，3...）
e:first-child示例。-----------------e:last-child、e:only-child参考此示例思考。
1 <!--html--> 2 <p>p</p><!-- 匹配--> 3 <div> 4 <p></p><!-- 匹配--> 5 <div> 6 <span></span> 7 <p></p><!-- 不匹配--> 8 </div> 9 </div> 10 <!--css--> 11 p:first-child{ 12 background-color: red; 13 }
e:nth-child(2n+1)表示查找奇元素（1，3，5...），同等于e:nth-child(odd)
e:nth-child(2n)表示查找偶元素（2，4，6...），同等于e:nth-child(even)
再次强调css采用自然数查数规则从1开始，但是n是从0开始的。
- e:first-last-child---------即为e:nth-child的倒序查询，在css中不能有e:nth-child(-1)这种复数操作，即使用last来实现倒序。
/*查找父元素下的最后一个元素，并且为p的元素*/ p:nth-last-child(1){background-color:red;}
- e:first-of-type
- e:last-of-type
- e:only-of-type
- e:nth-of-type(n)
- e:nth-of-last-type(n)
上面这一组伪类选择器是所表示的是父级元素下e元素的特定的哪一个，不再是父级元素的哪一个。即查数规则是按照e元素本身集合，而不是按照e元素所有兄弟元素的集合。
- e:empty-------------------匹配没有任何子节点的元素e，所以内部包含text-node都不行，但是注释节点在这里不被看作是节点，所以如果元素内部只有注释节点也是可以被e:empty匹配
- e:checked----------------匹配用户界面上被选中的元素。(用于input元素type为radio与checkbox时)
- e:enabled-----------------匹配用户界面上处于可用状态的元素。(元素没有设置disabled属性)
- e:disabled----------------匹配用户界面上处于被禁止的状态的元素。(元素设置了disabled属性)
关于e:checked的一个小实验：
1 <label> 2 一个小惊喜 3 <input type="checkbox" name=""> 4 <span></span> 5 </label> 6 <!--css--> 7 input:checked + span{ 8 background-color: green; 9 } 10 input:checked + span::after{ 11 content: "都是隔壁老王的错"; 12 color: #fff; 13 }
- e:read-write---------匹配可读可写的状态的元素。（没有设置readonly属性元素）
- e:read-only----------匹配只可读的状态的元素。（设置了readonly属性的元素）
