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。 
与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。