2015-12-13复习之CSS3选择器
一、属性选择器
在css3中追加了三个属性选择器[att*=val] [att^=val] [att$=val]，使得属性选择器有了通配符的概念。
[att*=val]（包含）
[att^=val]（首字符）
[att$=val]（结束字符）
注意：若遇到一些符号时要在符号前加上转义字符“\”，如[id=section\-header]
二、结构性伪类选择器
1、伪类选择器（link hover...）
2、伪元素选择器
- first-line（第一行）
- first-letter（首字母）
- before（内容之前）
- after（内容之后）
- DEMO
- 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p:first-line{color: red;}
p:first-letter{color: blue;}
li:before{content: "yes"; font-size: 10px; color: #dddddd;}
li:after{content: "hello"; font-size: 10px; color: #dddddd;}
</style>
</head>
<body>
<p>yiyiyiyi<br>ererererer</p>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>
三、选择器root not empty target
在CSS3中，结构性伪类选择器的共同特征是允许开发者根据文档中的结构来制定元素的样式
- root（将样式绑在界面的根元素中，即文档中最顶层的元素，就是指整个HTML的部分）
:root{ background:#ddd;}小细节：如果这个时候对body应用了样式，则：
如果不添加root，只应用body样式，则：
- not（排除子结构元素使用相应样式）
<div><h1>1</h1><h2>2</h2></div>
div *:not(h1){ color:red;}
- empty（选择空元素）
<td>123</td><td></td>
:empty{ background-color:black;}
- target（突出当前活动的HTML锚）
:target{ background-color:orange;}
四、first-child last-child nth-child nth-last-child 奇偶数选择
first-child（父元素中第一个子元素）
last-child（父元素中最后一个子元素）
nth-child（指定序号的子元素---->下标从1开始，从上往下）
nth-last-child（指定序号的子元素---->下标从1开始，从下往上）
还可以选择奇偶数
从前往后，奇数：nth-child(odd)
从后往前，偶数：nth-last-child(even)
也可以选择倍数
nth-child(3n+1) , nth-child(3n+2) , nth-child(3n)
五、nth-of-type nth-last-of-type
css在计算子元素是奇还是偶，只针对同类型的进行计算
例如：
<h5>title</h5> <p>111</p> <h5>title</h5> <p>222</p> <h5>title</h5> <p>333</p>如果你想选择奇数的h5，也许会使用下列样式
h5:nth-child(odd){
background-color: #47ff1e;
}但是结果并不如人意：
此时使用nth-of-type能打到预期效果
<span style="font-size:18px;">h5:nth-of-type(odd){
background-color: #47ff1e;
}</span>
六、only-child only-of-type
:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。
可以使用only-child选择器来代替使用nth-child和nth-last-child的实现方法，当且仅当只有一个子元素
<ul>
<li>12345</li>
</ul>
<ul>
<li>12345</li>
<li>12345</li>
</ul>
li:only-child{
background-color: #47ff1e;
}
:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。
七、UI元素状态伪类选择器
E:hover E:active E:focus E:read-only E:checked E:disabled
E:default E:indeterminate E::selection E:invalid E:valid E:required E:optional E:in-range
- E:hover选择器用来指定当鼠标指针移动到元素上面时，元素所使用的样式。
- E:active选择器用来指定元素被激活（鼠标在元素上按下还没有松开时）时使用的的样式。
- E:focus选择器用来指定当元素获得焦点时使用的样式。主要是文本框控件获得焦点病进行文字输入时使用。
- E:enabled选择器用来指定当前元素处于可用状态时的样式
- E:disabled选择器用来指定当前元素处于不可用状态时的样式
- E:read-only选择器用来指定当元素处于只读状态时的样式，在ff下需要写成-moz-read-only的形式
- E:read-write选择器用来指定当元素处于非只读状态时的样式。在ff下需要写成-moz-read-write的形式
- E:checked选择器用来指定当表单中的radio单选按钮或checkbox复选框处于选取状态的时的样式。在ff下需要写成-moz-checked的形式
- E:default选择器用来指定当页面打开时默认处于选取状态的单选按钮或者复选框的样式。需要注意的是，即使用户将默认设定为选取状态的单选按钮或者复选框修改为非选取状态，使用E:default选择器设定的样式依然有效。
- E:indeterminate选择器用来指定当页面打开时，如果一组单选按钮中任何一个单选按钮都没有设定为选取状态时的整组的单选按钮的样式。如果用户选中这组中的任何一个单选按钮，那么整组的单选按钮的样式被取消。
- E::selection选择器用来指定当元素处于选中状态时的样式。这里需要注意的是:在ff下使用时，需要写成-moz-selection的形式。
- required：支持这个属性，并且定义了required的
- optional：支持requried属性，但是没有定义的
- invalid：不符合元素范围的
- valid：符合元素范围校验的
- in-range：在范围内的
- out-of-range：超出范围的