H5基础知识第八课时（CSS3选择器）

1.CSS3属性选择器

(1)E[att] 选择具有att属性的E元素。 

<style>

img[alt] {
margin: 10px;

}

</style>

<img src="图片url" alt="" />

<img src="图片url" />

此例，将会命中第一张图片，因为匹配到了alt属性

(2)E[att="val"] 选择具有att属性且属性值等于val的E元素。 

<style>

input[type="text"] {
border: 2px solid #000;

}

</style>

<input type="text" />

<input type="submit" />

此例，将会命中第一张input，因为匹配到了alt属性，并且属性值为text

(3)E[att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。 

<style>

div[class~="a"] {
border: 2px solid #000;

}

</style>

<div class="a">1</div>

<div class="b">2</div>

<div class="a b">3</div>

此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a

(4)E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素

<style>

div[class^="a"] {
border: 2px solid #000;

}

</style>

<div class="abc">1</div>

<div class="acb">2</div>

<div class="bac">3</div>

此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头

(5)E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素

<style>

div[class$="c"] {
border: 2px solid #000;

}

</style>

<div class="abc">1</div>

<div class="acb">2</div>

<div class="bac">3</div>

此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾

(6)E[att*="val"]选择具有att属性且属性值为包含val的字符串的E元素。 

<style>

div[class*="b"] {
border: 2px solid #000;

}

</style>

<div class="abc">1</div>

<div class="acb">2</div>

<div class="bac">3</div>

此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b

(7)E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

<style>

div[class|="a"] {
border: 2px solid #000;

}

</style>

<div class="a-test">1</div>

<div class="b-test">2</div>

<div class="c-test">3</div>此例，将会命中第一个div，因为匹配到了class属性，且属性值以紧跟着"-"的a开头

2.伪类选择器

(1)E:nth-child(n)匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。 

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素 

该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n) ,奇数可以写成E:nth-child(2n+1);也可以使用odd（奇）, even（偶）实现奇偶：

注意： 

HTML示例代码：

<div>
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>
<p>第4个p</p>
<p>第5个p</p>

</div>

CSS Case 1：

p:nth-child(2){color:#f00;}很明显第2个p会被命中然后变成红色

CSS Case 2：

p:nth-child(3){color:#f00;}这是会命中第3个p么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。

CSS Case 3：

p:nth-child(4){color:#f00;}这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素

E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。

假设不确定第1个子元素是否为E，但是又想命中第1个E，应该这样写：

p:first-of-type{color:#f00;}或者这样写：

p:nth-of-type(1){color:#f00;}

(2)E:nth-last-child(n)匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。 

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素 

该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1) 

注意： 

HTML示例代码：

<div>
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>

</div>

如上HTML，假设要命中倒数第一个p(即正数第3个p)，那么CSS选择符应该是：

p:nth-last-child(2){color:#f00;}

而不是：p:nth-last-child(1){color:#f00;}

因为倒数第1个p，其实是倒数第2个子元素。基于选择符从右到左解析，首先要找到第1个子元素，然后再去检查该子元素是否为p，如果不是p，则n递增，继续查找

假设不确定倒数第1个子元素是否为E，但是又想命中倒数第1个E，应该这样写：p:last-of-type{color:#f00;}或者这样写：p:nth-last-of-type(1){color:#f00;}

(3)E:first-child 匹配父元素的第一个子元素E。 

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素 

注意：E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。 

p:first-child{color:#f00;}

<div>
<p>我是一个p</p>

        <h2>我是一个标题</h2>

</div>

(4)E:last-child 匹配父元素的最后一个子元素E。 

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素 

E:last-child选择符，E必须是它的兄弟元素中的最后一个元素，换言之，E必须是父元素的最后一个子元素。与之类似的伪类还有E:first-child，只不过情况正好相反，需要它是第一个子元素。

(5)E:not(s) 匹配不含有s选择符的元素E。 

有了这个选择符，那么你将可以很好的处理类似这样的场景：假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线

 li:not(:last-childaa){

            border-bottom: 1px solid red;

        }

3.状态伪类选择器

(1)E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) 

<style>

        input:checked + span{

            color: red;

        }

    </style>

<form action="">

    <label for="a">

        <input type="radio" id="a" name="sex" value="1">

        <span>

        男

    </span>

    </label>

    <label for="b">

        <input type="radio" id="b" name="sex" value="2">

        <span>

        女

    </span>

</form>

(2)E:enabled 匹配用户界面上处于可用状态的元素E。 

<style>

        input[type="text"]:enabled {

           border: 1px solid #090;

            color: #000;

        }

</style>

<form action="">

       <span>姓名</span>

        <input type="text" id="c" name="name" >

</form>

(3)E:disabled 匹配用户界面上处于禁用状态的元素E

4.其他选择器

(1)E+F 相邻选择器 选择紧贴在E元素之后F元素。 

与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。

 

(2)E~F 兄弟选择器 选择E元素后面的所有兄弟元素F。 

与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。