CSS3选择器

• Relationship Selectors：关系型选择器
• Attribute Selectors：属性选择器
• Pseudo-Element Selectors:伪元素选择器

 一、Relationship Selectors:关系型选择器

 1. E + F : 选择E的下一个兄弟元素并且满足条件F

/* Relationship Selectors：关系型选择器 */
/* e + f */
/* e、f分别表示为两个元素： e + f 的CSS选择器所表示的是“e的下一个满足条件的兄弟元素f” */
/* 通俗的说就是e的下一个兄弟元素，而且必须是紧挨着的，并且符合f的选择条件的元素 */
div + p{
    background-color: red;
}

能匹配（E + F）的代码:

<div> div </div>
<p> p </p>

不能匹配（E + F）的代码：

<div> div </div>
<ul> ul </ul>
<p> p </p>

E和F除了是示例中的元素选择器，可以是任意其他选择器，比如类选择器，ID选择器。

2. E ~ F :选择E元素下面的符合F选择条件的同级兄弟元素。

div ~ p{
    background-color: red;
}

能否匹配请看代码后面的注释：

<p> p </p><!-- 不能匹配 -->
<div> div </div>
<ul> ul </ul>
<p> p </p><!-- 能匹配到 -->

所以，前面的e + f不能匹配下面的p标签。(e和f这种关系可以用js的一种数据结构来表示就是：同处于一个集合(数组)下的元素，f的索引值大于e的索引值)

<p> p </p><!-- div + p 选择器不能匹配这个p元素 -->
<div> div </div>

 二、Attribute Selectors：属性选择器

• CSS2属性选择器与并列选择器
• CSS3属性选择器

1. 在前面的一篇css选择器中就有介绍属性选择器，但是没有具体分析和示例说明，下面就通过一些示例来一一介绍属性选择器。通常我们的属性选择器会这么用。

div[data]{
    background-color: red;
}

上面这是属性选择器吗？严格来说，这叫做并列选择器。是由div标签选择器和[data]属性选择器组合而成的并列选择器，所表达的意思是同时符合这两个选择条件的元素。所以CSS2的属性选择器是下面这样的：

[data]{
    background-color: red;
}

很少能见到吧，不是很少，是在开发中几乎看不到这种写法，但它就是纯粹的CSS2的属性选择器，它可以匹配下面示例中的所有元素：

<div data="a">a</div>
<div data="a b">b</div>
<span data="">span</span>
<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表示的是属性具体的值）

[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><!--不匹配-->
<div data="aaa">a</div><!--不匹配-->
<div data="a-bbbbb">a</div><!--匹配-->
<div data="aa">a</div><!--不匹配-->
<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的的元素去掉。引用场景有一组列表框最后一个不需要设置下边框。

<!--html-->
<ul>
    <li>demo</li>
    .....这里n个li    
<ul>
<!--css-->
ul{
    border: 1px solid red;
}
li{
    list-style: none;
}
li:not(:last-of-type){/*:last-of-type表示最后一个元素*/
    border-bottom: 1px solid #888;
}

e:root：根标签选择器，很多时候被看作是选择HTML标签，要是在xml文件中呢？人家:root还是作用根标签，通常在应用时是直接写:root，e会被省略，因为e在伪类中表示的就是后面伪类作用的范围。这里暂时不演示:root的使用示例，后面会有结合其not和target的一个综合demo。

e:target：结合前面的解析，实质上可以描述为:target选择的是被锚定的元素。这种口头的描述很抽象，来个not、root、target综合小demo。

需求：通过not、root、target伪类选择器实现三个按钮切换背景颜色。

<!--html-->
<div class="wrapper">
    <a href="#red">red</a>
    <a href="#green">green</a>
    <a href="#orange">orange</a>
</div>
<div id="red"></div>
<div id="green"></div>
<div id="orange"></div>
<!--css-->
<style>
    *{
        margin: 0;
        padding: 0;
    }
    :root,
    body{
        height: 100%;
    }
    div[class]{
        position: absolute;
        margin-top: 10px;
        margin-left: 10px;
        width: 400px;
        height: 80px;
        padding-left: 50px;
        border-radius: 5px;
        border: 1px solid #888;
    }
    div:not(.wrapper){
        width: 100%;
        height: 100%;
    }
    #red{
        background-color: red;
    }
    #green{
        background-color: green;
    }
    #orange{
        background-color: orange;
    }
    div[id]:not(:target){
        display: none;
    }
</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参考此示例思考。

<!--html-->
<p>p</p><!-- 匹配-->
<div>
    <p></p><!-- 匹配-->
    <div>
        <span></span>
        <p></p><!-- 不匹配-->
    </div>
</div>
<!--css-->
p:first-child{
    background-color: red;
}

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的一个小实验：

<label>
    一个小惊喜
    <input type="checkbox" name="">
    <span></span>
</label>
<!--css-->
input:checked + span{
    background-color: green;
}
input:checked + span::after{
    content: "都是隔壁老王的错";
    color: #fff;
}

• e:read-write---------匹配可读可写的状态的元素。（没有设置readonly属性元素）
• e:read-only----------匹配只可读的状态的元素。（设置了readonly属性的元素）

CSS3中文手册DOYOE

CSS3权威网站CANIUSE