CSS3中新增的选择器

一、CSS3中新增的属性选择器：

1、在CSS3中追加了三个属性选择器([att*=val]、[att^=val]、[att$=val])：

（1）[att*=val]属性选择器：如果元素用att表示的属性的值中包括用val指定的字符，那么该元素使用这个样式；

（2）[att^=val]属性选择器：如果元素用att表示的属性的值的开头字符为用val指定的字符的话，那么该元素使用这个值；

（3）[att$=val]属性选择器：如果元素用att表示的属性的值的结尾字符为用val指定的字符的话，那么该元素使用这个样式。

2、属性选择器的应用：

（1）HTML代码：

<div id="box"><div id="section1"></div><div id="section1-1c"></div><div id="section1-1-1"></div><div id="section1-1-2d"></div><div id="section1-2"></div><div id="section1-2-1"></div><div id="section2d"></div><div id="bsectionc"></div><div id="section2-1"></div><div id="section2_1"></div><div id="section2-2d"></div></div>

（2）CSS样式：

1）所有id包含了section的div均被选中的CSS样式：

[id*=section]{background: lightblue;}

效果图如下：

2）所有id包含了section1的div均被选中的CSS样式：

[id*=section1]{background: lightblue;}

效果图如下：

3）所有id包含了section1-1的div均被选中的CSS样式：

[id*=section1-1]{background: lightblue;}

效果图如下：

4）所有id包含了section1-2的div均被选中的CSS样式：

[id*=section1-2]{background: lightblue;}

效果图如下：

5）所有id包含了section2的div均被选中的CSS样式：

[id*=section2]{background: lightblue;}

效果图如下：

6）所有id以section开头的div均被选中的CSS样式：

[id^=section]{background: lightblue;}

效果图如下：

7）所有id以s开头的div均被选中的CSS样式：

[id^=s]{background: lightblue;}

效果图如下：

8）所有id以b开头的div均被选中的CSS样式：

[id^=b]{background: lightblue;}

效果图如下：

9）所有id以d结尾的div均被选中的CSS样式：

[id$=d]{background: lightblue;}

效果图如下：

10）所有id以c结尾的div均被选中的CSS样式：

[id$=c]{background: lightblue;}

效果图如下：

11）所有id以-1结尾的div均被选中的CSS样式：

[id$=\-1]{/*结束符为数字的时候需要添加"\"并加上数字之前的一个字符*/background: lightblue;}

效果图如下：

12）所有id以_1结尾的div均被选中的CSS样式：

[id$=\_1]{background: lightblue;}

效果图如下：

二、CSS3中的结构性伪类选择器：

1、类选择器：在CSS中可以使用类选择器把相同的元素定义成不同的样式；比如：p.left{text-align:left;}p.right{text-align:right;}

2、伪类选择器：类选择器和伪类选择器的区别在于类选择器我们可以随意取名字，而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。最常见的伪类选择器：

（1）a:link{color:#ff6600;}未被访问的链接；

（2）a:visited{color:#87b291;}已被访问的链接；

（3）a:hover{color:#6535b2;}鼠标指针移动到链接上；

（4）a:active{color:#55b28e;}正在被点击的链接；

3、伪元素选择器：针对于CSS中已经定义好的伪元素使用的选择器；
（1）使用方法：选择器：伪元素{属性：值}
（2）与类配合使用：选择器.类名：伪元素{属性：值}

4、在CSS中，主要有四个伪元素选择器：

（1）first-line伪元素选择器：用于向某个元素中的第一行文字使用样式；

1）HTML代码：

<p>CSS中的伪元素选择器<br />first-line伪元素选择器：用于向某个元素中的第一行文字使用样式；</p>

2）CSS代码：

p:first-line{color: #20B2AA;}

3）效果图如下：

（2）first-letter伪元素选择器：用于向某个元素中的文字的首字母(欧美文字)或者第一个字(中文或者是日文等汉字)使用样式；

1）HTML代码：

<p>CSS中的伪元素选择器<br />first-line伪元素选择器：用于向某个元素中的第一行文字使用样式；</p>

2）CSS代码：

p:first-letter{color: cornflowerblue;font-size: 38px;}

3）效果图如下：

（3）before伪元素选择器：用于在某个元素之前插入内容；

（4）after伪元素选择器：用于在某个元素之后插入内容；

注：before伪元素和after伪元素的具体使用方法见：http://blog.csdn.net/z983002710/article/details/76349363

5、结构性伪类选择器root、not、empty和target：

（1）root选择器：将样式绑定到页面的根元素中；

1）HTML代码：

<p>CSS中的伪元素选择器<br />first-line伪元素选择器：用于向某个元素中的第一行文字使用样式；</p>

2）CSS代码：

:root{background: lightblue;}body{background: lightcoral;}

3）效果图如下：

（2）not选择器：想对某个结构元素使用样式，但是想排出这个结构元素下面的子结构元素，让它不使用这个样式时，我们可以用not选择器；

1）HTML代码：

<p class="p1">CSS中的伪元素选择器</p><p class="p2">CSS中的伪元素选择器</p><p class="p3">CSS中的伪元素选择器</p><p class="p4">CSS中的伪元素选择器</p><p class="p5">CSS中的伪元素选择器</p>

2）CSS代码：

p:not(.p1){background: lightblue;color: red;}

3）效果图如下：

（3）empty选择器：指定当前元素中内容为空白时使用的样式；

1）HTML代码：

<table border="1" cellspacing="0" cellpadding="0"><tr><td>Header1</td><td></td><td>Header3</td><td>Header4</td></tr><tr><td>Data1</td><td>Data2</td><td></td><td>Data4</td></tr></table>

2）CSS代码：

:empty{background: lightcoral;}

3）效果图如下：

（4）target选择器：对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接并且跳转到target元素后起作用；

1）HTML代码：

<a href="#A">A</a><a href="#B">B</a><a href="#C">C</a><a href="#D">D</a><div id="A"><h2>标题</h2><p>内容。。。。</p></div><div id="B"><h2>标题</h2><p>内容。。。。</p></div><div id="C"><h2>标题</h2><p>内容。。。。</p></div><div id="D"><h2>标题</h2><p>内容。。。。</p></div>

2）CSS代码：

:target{background: #20B2AA;}

3）效果图如下（点击id为B后的效果图）：

6、选择器nth-child：

注：:nth-child的具体使用见：http://blog.csdn.net/z983002710/article/details/74011706

7、选择器nth-of-type和nth-last-of-type：

（1）使用nth-of-type和nth-last-of-type在CSS3中统计的时候只针对同类型的子元素进行计算：nth-of-type正数而nth-last-of-type倒数；

1）HTML代码：

<div><h2>标题</h2><p>内容</p><h2>标题</h2><p>内容</p><h2>标题</h2><p>内容</p><h2>标题</h2><p>内容</p><h2>标题</h2><p>内容</p></div>

2）CSS代码：

h2:nth-of-type(odd){background: lightblue;}h2:nth-of-type(even){background: lightcoral;}p:nth-last-of-type(odd){color: darkcyan;}p:nth-last-of-type(even){color: magenta;}

3）效果图如下：

（2）兼容性：nth-of-type和nth-last-of-type都是CSS3开始提供需要在IE8以上的浏览器才会被支持、chrome浏览器、Firefox浏览器、Opera浏览器、Safari浏览器都支持；

8、循环使用样式：nth-child(An+B)，其中A表示每次循环中包括几种样式，B表示指定的样式在循环中所处的位置；

（1）HTML代码：

<ul><li>循环使用样式</li><li>循环使用样式</li><li>循环使用样式</li><li>循环使用样式</li><li>循环使用样式</li><li>循环使用样式</li><li>循环使用样式</li><li>循环使用样式</li></ul>

（2）CSS代码：

li:nth-child(5n+1){background: lightblue;}li:nth-child(5n+2){background: lightcoral;}li:nth-child(5n+3){background: lightcyan;}li:nth-child(5n+4){background: lightpink;}li:nth-child(5n+5){background: lightsalmon;}

（3）效果图如下：

9、only-child选择器：只对唯一的子元素起作用；

（1）HTML代码：

<div class="post"><p>only-child选择器</p>        <p>only-child选择器</p></div><div class="post"><p>only-child选择器</p></div>

（2）CSS代码：

.post p{  background: lightblue;  color: #fff;}.post p:only-child {  background: lightcoral;}

（3）效果图展示：

三、UI元素状态伪类选择器：

1、UI选择器的特征就是指定的样式只有当元素处于某种状态下的时候，才会起作用，在默认状态下是不起作用的。常见的UI元素选择器浏览器的兼容性如下：

UI元素状态伪类选择器支持的浏览器不支持的浏览器E:hoverFirefox、Safari、Opera、IE8、chrome E:activeFirefox、Safari、Opera、chromeIE8E:focusFirefox、Safari、Opera、IE8、chrome E:enabledFirefox、Safari、Opera、chromeIE8E:disabledFirefox、Safari、Opera、chromeIE8E:read-onlyFirefox、OperaIE8、Safari、chromeE:read-writeFirefox、OperaIE8、Safari、chromeE:checkedFirefox、Safari、Opera、chromeIE8E::selectionFirefox、Safari、Opera、chromeIE8E:defaultFirefoxSafari、Opera、IE8、chromeE:indeterminatechromeFirefox、Safari、Opera、IE8E:invalidFirefox、Safari、Opera、chromeIE8E:vaildFirefox、Safari、Opera、chromeIE8E:requiredFirefox、Safari、Opera、chromeIE8E:optionalFirefox、Safari、Opera、chromeIE8E:in-rangeFirefox、Safari、Opera、chromeIE8E:out-of-rangFirefox、Safari、Opera、chromeIE8

2、选择器E:hover、E:active和E:focus：

（1）E:hover选择器被用来指定当鼠标指针移动到元素上时所使用的样式。使用方法：<元素>:hover{CSS样式}，我们可以在"<元素>"中添加元素的type属性。如：input[type="text"]:hover{CSS样式}

（2）E:active选择器被用来指定元素被激活时使用的样式；

（3）E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用；

（4）小案例：当鼠标移动上去时文本框变成绿色，当鼠标点击时文本框处于蓝色，当处于可输入状态时文本框变成橙色；

1）HTML代码：

<form>姓名：<input type="text" id="" value="" placeholder="请输入名字" /><br /><br />密码：<input type="password" name="" placeholder="请输入密码" /></form>

2）CSS代码：

input[type="text"]:hover{background: green;}input[type="text"]:focus{background: orange;color: white;}input[type="text"]:active{background: blue;}

3）效果图如下：

①hover的效果图：

②focus的效果图：

③active效果图：

3、E:enabled伪类选择器与E:disabled伪类选择器：

（1）E:enabled选择器被用来指定当元素处于可用状态时的样式；

（2）E:disabled选择器被用来指定当元素处于不可用状态时的样式；

（3）小案例：文本框可用时背景颜色绿色，不可用时背景颜色浅灰色；

1）HTML代码：

<form>姓名：<input type="text" id="" value="" placeholder="请输入名字" disabled="disabled" /><br /><br />工号：<input type="text" id="" value="" placeholder="请输入工号" /></form>

2）CSS代码：

input[type="text"]:enabled{background: green;}input[type="text"]:disabled{background: #999999;}

3）效果图如下：

4、E:read-only伪类选择器与E:read-write伪类选择器：

（1）E:read-only选择器被用来指定当元素处于只读状态时的样式；

（2）E:read-write选择器被用来指定当元素处于非只读状态时的样式；

（3）小案例：文本框可用时输入文字变成红色，不可用时，设置里面的背景为黑色，文字为绿色；

1）HTML代码：

<form>姓名：<input type="text" id="" value="Sunny" placeholder="请输入名字" readonly="readonly" /><br /><br />工号：<input type="text" id="" value="" placeholder="请输入工号" /></form>

2）CSS代码：

input[type="text"]:read-only{background: black;color: green;}input[type="text"]:read-write{color: red;}

3）效果图如下：

5、伪类选择器E:checked、E:default和E:indeterminate：

（1）E:checked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式；

（2）E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式；

（3）E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式；

（4）小案例：模拟一个选框控件，当选择以后，会给他一个2px 实线 绿色的边框；

1）HTML代码：

<form>房屋状况：<input type="checkbox" id="" value="" />自来水<input type="checkbox" id="" value="" />电<input type="checkbox" id="" value="" />气<input type="checkbox" id="" value="" />光纤</form>

2）CSS代码：

input[type="checkbox"]:checked{outline: 12px solid green;}

3）效果图如下：

6、伪类选择器E::selection：

（1）E::selection伪类选择器用来指定当元素处于选中状态时的样式；

（2）小案例：选择网页中p段落中的文字和文本框中的文字，改变他的背景颜色为绿色；

1）HTML代码：

<p>好好学习，天天向上。</p><form>姓名：<input type="text" id="" value="" placeholder="请输入名字" /></form>

2）CSS代码：

p::selection{background: green;}input[type="text"]::selection{background: green;}

3）效果图如下：

7、E:invalid伪类选择器与E:valid伪类选择器：

（1）E:invalid伪类选择器用来指定当元素内容不能通过HTML5通过使用的元素的诸如required等属性所指定的检查或者元素内容不符合元素规定的格式时的样式；

（2）E:valid伪类选择器用来指定当元素内容能通过HTML5通过使用的元素的诸如required等属性所指定的检查或者元素内容符合元素规定的格式时的样式；

（3）小案例：通过Email属性的表单判断输入是否正确，正确输入的内容为绿色，输入错误就是红色；

1）HTML代码：

<form>邮箱：<input type="email" id="" value="" placeholder="请输入邮箱" /><br /><br />邮箱：<input type="email" id="" value="" placeholder="请输入邮箱" /></form>

2）CSS代码：

input[type="email"]:valid{color: green;}input[type="email"]:invalid{color: red;}

3）效果图如下：

8、E:required伪类选择器与E:optional伪类选择器：

（1）E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式；

（2）E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式；

（3）小案例：姓名必填单背景红色、年龄可选填表单背景为绿色；

1）HTML代码：

<form>姓名：<input type="text" id="" value="" placeholder="请输入名字" required="required" /><br /><br />工号：<input type="text" id="" value="" placeholder="请输入工号" /></form>

2）CSS代码：

input[type="text"]:required{background: red;}input[type="text"]:optional{background: green;}

3）效果图如下：

9、E:in-range伪类选择器与E:out-of-range伪类选择器：

（1）E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式；

（2）E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式；

（3）小案例：0-100以内的数字，小于0或者超过100字体变成红色，否则为绿色；

1）HTML代码：

<form>输入100以内的数字：<input type="number" id="" value="" min="0" max="100" /><br /><br />输入0-100以外的数字：<input type="number" id="" value=""  min="0" max="100" /></form>

2）CSS代码：

input[type="number"]:in-range{color: green;}input[type="number"]:out-of-range{color: red;}

3）效果图如下：