正文
CSS3 选择器读解
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
文章资料来自于W3Cfuns
CSS3.0 四个基本的结构性伪类选择器
:root 此选择器将绑定到页面的根元素中，所谓根元素，是指文档树中最顶层的元素，也就是<html>部
分。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
:root{background:#900;}
#box{height:100px; background:#090;}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
:not 如果想对某个结构元素使用样式，但是又想排除这个个元素下面的某个子元素，让它不使用此样
式，可以使用它，看例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
#box *:not(h1){color:#900; font-weight:700;}
</style>
</head>
<body>
<div id="box">
<h1>前端开发网(W3Cfuns.com)</h1>
<p>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</p>
</div>
</body>
</html>
:empty 当元素内容为空白的时候，使用其所定义的样式，案例如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
:empty{width:200px; height:200px; background:#008000;}
</style>
</head>
<body>
<div id="box"></div>
</body></html>
:target 使用其选择器来对页面中的target元素（该元素的ID被当作页面中的超链接）指定的样式，该
样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用，案例如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
:target{font-weight:700; color:#fff; background:#900;}
</style>
</head>
:first-child选择器和:last-child选择器 之所以将这两个选择器放到一起来讲，是因为它们非常相似
，前者表示单独选择某类元素的第一个元素，后者表示单独选择某类元素的最后一个元素。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[二] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
#list{font-family:"Microsoft yahei"; font-size:14px;}
#list li{width:300px; height:30px; line-height:30px; text-align:center;
color:#fff; background:#000; list-style:none;}
#list li:first-child{color:#000; background:#fff;}/*选择#list的第一个子元素
li*/
#list li:last-child{color:#666; background:#dfdfdf;}/*选择#list的最后一个子
元素li*/
</style>
</head>
<body>
<ul id="list">
<li>选项一 | 前端开发网(W3Cfuns.com)!</li>
<li>选项二 | 前端开发网(W3Cfuns.com)!</li>
<li>选项三 | 前端开发网(W3Cfuns.com)!</li>
<li>选项四 | 前端开发网(W3Cfuns.com)!</li>
<li>选项五 | 前端开发网(W3Cfuns.com)!</li>
</ul>
</body>
</html>
:nth-child选择器和:nth-last-child选择器
学会前两个结构性伪类选择器后，我们知道它们可以选择第一个和最后一个子元素，可是又有新的问
题了，有的时候我是选择列表中的其中任何一个子元素该怎么办呢？
比如我想选择列表中的第二个子元素li，那么只需要li:nth-child(2){}即可，如果想要选择倒数第
二个子元素li，那么只需要li:nth-last-child(2){}即可，案例如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[二] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
#list{font-family:"Microsoft yahei"; font-size:14px;}
#list li{width:300px; height:30px; line-height:30px; text-align:center;
color:#fff; background:#000; list-style:none;}
#list li:nth-child(2){color:#000; background:#fff;}/*选择#list的第二个子元
素li*/
#list li:nth-last-child(2){color:#666; background:#dfdfdf;}/*选择#list的倒
数第二个子元素li*/
</style>
</head>
<body>
<ul id="list">
<li>选项一 | 前端开发网(W3Cfuns.com)!</li>
<li>选项二 | 前端开发网(W3Cfuns.com)!</li>
<li>选项三 | 前端开发网(W3Cfuns.com)!</li>
<li>选项四 | 前端开发网(W3Cfuns.com)!</li>
<li>选项五 | 前端开发网(W3Cfuns.com)!</li>
</ul>
</body>
</html>
隔行换色效果其实很简单，同样是根据奇偶数判断，英文里面的奇数是odd，偶数是even，所以我们只
需要给这两个选择器传入odd或even就能筛选出奇数行或偶数行了。
nth-last-child同样也可以传入这两个单词，只不过是倒数元素而已，好，我们现在来看一下案例
：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[三] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
#list{font-family:"Microsoft yahei"; font-size:14px;}
#list li{width:300px; height:30px; line-height:30px; text-align:center;
color:#fff; background:#000; list-style:none;}
#list li:nth-child(odd){color:#000; background:#f2f2f2;}/*奇数行*/
#list li:nth-child(even){color:#666; background:#dfdfdf;}/*偶数行*/
</style>
</head>
<body>
<ul id="list">
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
<li>选项02 | 前端开发网(W3Cfuns.com)!</li>
<li>选项03 | 前端开发网(W3Cfuns.com)!</li>
<li>选项04 | 前端开发网(W3Cfuns.com)!</li>
<li>选项05 | 前端开发网(W3Cfuns.com)!</li>
<li>选项06 | 前端开发网(W3Cfuns.com)!</li>
<li>选项07 | 前端开发网(W3Cfuns.com)!</li>
<li>选项08 | 前端开发网(W3Cfuns.com)!</li>
<li>选项09 | 前端开发网(W3Cfuns.com)!</li>
<li>选项10 | 前端开发网(W3Cfuns.com)!</li>
</ul>
</body>
</html>
nth-child和nth-last-child的高级用法，可以实现隔行变色等效果，但是它在使用的过程中有一个问题
，是什么问题呢？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
#list{font-family:"Microsoft yahei"; font-size:14px;}
#list dt,#list dd{height:30px; line-height:30px; text-align:center;
color:#000; list-style:none;}
#list dt:nth-child(odd){color:#fff; background:#900;}/*当前dl列表的第奇数个
子元素如果是dt子元素，那么将选择它*/
#list dt:nth-child(even){background:#090;}/*当前dl列表的第偶数个子元素如果
是dt子元素，那么将选择它*/
</style>
</head>
<body>
<dl id="list">
<dt>前端开发网(W3Cfuns.com)!</dt>
<dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
<dt>前端开发网(W3Cfuns.com)!</dt>
<dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
<dt>前端开发网(W3Cfuns.com)!</dt>
<dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
<dt>前端开发网(W3Cfuns.com)!</dt>
<dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
<dt>前端开发网(W3Cfuns.com)!</dt>
<dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
</dl>
</body>
</html>
我们可以发现明明设置了奇数行和偶数行的dt，按道理来讲，应该是红白绿：
这是因为，nth-child和nth-last-child在计算子元素是奇数行还是偶数行的时候，是连通父级元素中的
所有子元素一起计算的，换句话说，dt:nth-child(odd)这句话的含义，并不是指“当前dl列表中的第奇
数个dt子元素来计算”，而是指“当前dl列表的第奇数个子元素如果是dt子元素，那么将选择它”，那
么这种计算方式与我们所“理解”的这种需求怎么计算呢？
nth-of-type选择器和nth-last-of-type选择器
这两个选择器可以避免上述的问题，CSS3在计算子元素是第奇数个还是第偶数个自元素的时候，就
只针对同类型的子元素进行计算了，这两个选择器的使用方法如下所示：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
#list{font-family:"Microsoft yahei"; font-size:14px;}
#list dt,#list dd{height:30px; line-height:30px; text-align:center; list-
style:none; color:#fff;}
#list dd{color:#000;}
#list dt:nth-of-type(odd){background:#900;}/*奇数行*/
#list dt:nth-of-type(even){background:#090;}/*偶数行*/
</style>
</head>
<body>
<dl id="list">
<dt>前端开发网(W3Cfuns.com)!</dt>
<dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
<dt>前端开发网(W3Cfuns.com)!</dt>
<dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
<dt>前端开发网(W3Cfuns.com)!</dt>
<dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
<dt>前端开发网(W3Cfuns.com)!</dt>
<dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
<dt>前端开发网(W3Cfuns.com)!</dt>
<dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
</dl>
</body>
</html>
循环使用样式：
我们同样还是使用nth-child选择器，只不过咱们这次给它的参数是表达式，咱们先来看案例，看过
之后你就明白了：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[五] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
#list{font-family:"Microsoft yahei"; font-size:14px;}
#list li{width:300px; height:30px; line-height:30px; text-align:center;
color:#fff; background:#000; list-style:none;}
#list li:nth-child(4n+1){background:#900;}/*从第一行开始算起 每隔4个（包含
第四个）使用次样式*/
#list li:nth-child(4n+2){background:#090;}/*从第二行开始算起 每隔4个（包含
第四个）使用次样式*/
#list li:nth-child(4n+3){background:#009;}/*从第三行开始算起 每隔4个（包含
第四个）使用次样式*/
#list li:nth-child(4n+4){background:#990;}/*从第四行开始算起 每隔4个（包含
第四个）使用次样式*/
</style>
</head>
<body>
<ul id="list">
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
<li>选项02 | 前端开发网(W3Cfuns.com)!</li>
<li>选项03 | 前端开发网(W3Cfuns.com)!</li>
<li>选项04 | 前端开发网(W3Cfuns.com)!</li>
<li>选项05 | 前端开发网(W3Cfuns.com)!</li>
<li>选项06 | 前端开发网(W3Cfuns.com)!</li>
<li>选项07 | 前端开发网(W3Cfuns.com)!</li>
<li>选项08 | 前端开发网(W3Cfuns.com)!</li>
<li>选项09 | 前端开发网(W3Cfuns.com)!</li>
<li>选项10 | 前端开发网(W3Cfuns.com)!</li>
<li>选项11 | 前端开发网(W3Cfuns.com)!</li>
<li>选项12 | 前端开发网(W3Cfuns.com)!</li>
</ul>
</body>
</html>
<body>
<p><a href="#box1">第一个</a> <a href="#box2">第二个</a> <a href="#box3">第三个</a>
<a href="#box4">第四个</a></p>
<div id="box1">
<h1>第一个：前端开发网(W3Cfuns.com)</h1>
<p>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</p>
</div>
<div id="box2">
<h1>第二个：前端开发网(W3Cfuns.com)</h1>
<p>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</p>
</div>
<div id="box3">
<h1>第三个：前端开发网(W3Cfuns.com)</h1>
<p>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</p>
</div>
<div id="box4">
<h1>第四个：前端开发网(W3Cfuns.com)</h1>
<p>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</p>
</div>
</body>
</html>
:nth-child():nth-last-child() 练习
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[五] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
ul{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
ul li{width:300px; height:30px; line-height:30px; text-align:center;
color:#fff; background:#000; list-style:none;}
ul li:nth-child(1):nth-last-child(1){background:#900;}
</style>
</head>
<body>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
</ul>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
<li>选项02 | 前端开发网(W3Cfuns.com)!</li>
</ul>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
<li>选项02 | 前端开发网(W3Cfuns.com)!</li>
<li>选项03 | 前端开发网(W3Cfuns.com)!</li>
<li>选项04 | 前端开发网(W3Cfuns.com)!</li>
<li>选项05 | 前端开发网(W3Cfuns.com)!</li>
<li>选项06 | 前端开发网(W3Cfuns.com)!</li>
<li>选项07 | 前端开发网(W3Cfuns.com)!</li>
<li>选项08 | 前端开发网(W3Cfuns.com)!</li>
<li>选项09 | 前端开发网(W3Cfuns.com)!</li>
<li>选项10 | 前端开发网(W3Cfuns.com)!</li>
<li>选项11 | 前端开发网(W3Cfuns.com)!</li>
<li>选项12 | 前端开发网(W3Cfuns.com)!</li>
</ul>
</body>
</html>
:only-child 选择器 规定属于其父元素的唯一子元素的每个 p 元素：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-结构性伪类选择器[五] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
ul{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
ul li{width:300px; height:30px; line-height:30px; text-align:center;
color:#fff; background:#000; list-style:none;}
ul li:only-child{background:#900;}
</style>
</head>
<body>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
</ul>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
<li>选项02 | 前端开发网(W3Cfuns.com)!</li>
</ul>
<ul>
<li>选项01 | 前端开发网(W3Cfuns.com)!</li>
<li>选项02 | 前端开发网(W3Cfuns.com)!</li>
<li>选项03 | 前端开发网(W3Cfuns.com)!</li>
<li>选项04 | 前端开发网(W3Cfuns.com)!</li>
<li>选项05 | 前端开发网(W3Cfuns.com)!</li>
<li>选项06 | 前端开发网(W3Cfuns.com)!</li>
<li>选项07 | 前端开发网(W3Cfuns.com)!</li>
<li>选项08 | 前端开发网(W3Cfuns.com)!</li>
<li>选项09 | 前端开发网(W3Cfuns.com)!</li>
<li>选项10 | 前端开发网(W3Cfuns.com)!</li>
<li>选项11 | 前端开发网(W3Cfuns.com)!</li>
<li>选项12 | 前端开发网(W3Cfuns.com)!</li>
</ul>
</body>
</html>
:hover选择器、:active选择器和:focus选择器
:hover选择器：当鼠标悬停在所指定的元素上时所使用的样式；
:active选择器：当所指定的元素处于激活状态（鼠标在元素上按下还没有松开）时所使用的样式；
:focus选择器：当元素获得光标焦点时使用的样式，主要用在文本框输入文字时使用；
【注】下方案例运行效果，之所以点击后立即变为绿色是因为active触发的同时focus也触发了，所
以active定义的样式看似无效，大家可以先把focus定义的样式注释掉运行；
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-状态伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
body{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
ul{margin:50px auto; width:260px; height:100px; list-style:none;}
ul li{margin-bottom:10px; overflow:hidden;}
label,input{display:inline; float:left;}
label{padding-right:8px; width:50px; height:27px; line-height:27px; text-
align:right;}
input{width:200px; height:25px; border:1px #eee solid; border-top:1px
#d1d1d1 solid; outline:none;}
input:hover{background:#eff7ff;}
input:active{background:#ffd;}
input:focus{background:#f2fddb;}
</style>
</head>
<body>
<ul>
<li>
<label for="userName">姓名:</label>
<input id="userName" type="text"/>
</li>
<li>
<label for="userPwd">密码:</label>
<input id="userPwd" type="password"/>
</li>
</ul>
</body>
</html>
:enabled选择器和:disabled选择器
:enabled状态伪类选择器用来指定当前元素处于可用状态的样式；
:disabled状态伪类选择器用来指当前元素处于不可用状态的样式；
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-状态伪类选择器[二] | 前端开发网(W3Cfuns.com)!</title>
<script type="text/javascript">
window.onload = function()
{
var rd1 = document.getElementById("radio1");
var rd2 = document.getElementById("radio2");
var tb = document.getElementById("textBox");
rd1.onclick = function()
{
tb.value = "状态：可用 | 前端开发网(W3Cfuns.com)!";
tb.disabled = false;
}
rd2.onclick = function()
{
tb.value = "状态：不可用 | 前端开发网(W3Cfuns.com)!";
tb.disabled = true;
}
}
</script>
<style type="text/css">
*{margin:0; padding:0;}
body{margin-bottom:20px; font-size:14px;}
#content{margin:30px auto; padding:10px; width:300px; overflow:hidden;}
label{display:inline; margin-bottom:5px; width:150px; height:25px;
line-height:25px; float:left;}
#textBox{display:block; width:300px; height:22px; line-height:22px;
font-family:"Microsoft yahei"; outline:none;}
#textBox:enabled{border:1px #eee solid; border-top:1px #d1d1d1
solid;}
#textBox:disabled{border:1px #999 solid; background:#efefef;}
</style>
</head>
<body>
<div id="content">
<label for="radio1"><input id="radio1" name="radio" type="radio"
checked/>可用:enabled</label>
<label for="radio2"><input id="radio2" name="radio" type="radio"/>不可
用:disabled</label>
<input id="textBox" type="text" value="状态：可用 | 前端开发网
(W3Cfuns.com)!"/>
</div>
</body>
</html>
:read-only选择器和:read-write选择器
:read-only状态伪类选择器用来指定当前元素处于只读状态的样式；
:read-write状态伪类选择器用来指当前元素处于非只读状态的样式；
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-状态伪类选择器[三] | 前端开发网(W3Cfuns.com)!</title>
<script type="text/javascript">
window.onload = function()
{
var rd1 = document.getElementById("radio1");
var rd2 = document.getElementById("radio2");
var tb = document.getElementById("textBox");
rd1.onclick = function()
{
tb.value = "状态：只读 | 前端开发网(W3Cfuns.com)!";
tb.readOnly = true;
}
rd2.onclick = function()
{
tb.value = "状态：非只读 | 前端开发网(W3Cfuns.com)!";
tb.readOnly = false;
}
}
</script>
<style type="text/css">
*{margin:0; padding:0;}
body{margin-bottom:20px; font-size:14px;}
#content{margin:30px auto; padding:10px; width:300px; overflow:hidden;}
label{display:inline; margin-bottom:5px; width:150px; height:25px; line-
height:25px; float:left;}
#textBox{display:block; width:300px; height:22px; line-height:22px; font-
family:"Microsoft yahei"; outline:none;}
#textBox:read-only{border:1px solid #96c2f1; background:#eff7ff;}
#textBox:read-write{border:1px #eee solid; border-top:1px #d1d1d1 solid;}
</style>
</head>
<body>
<div id="content">
<label for="radio1"><input id="radio1" name="radio" type="radio" checked/>只
读:read-only</label>
<label for="radio2"><input id="radio2" name="radio" type="radio"/>非只读:read-
write</label>
<input id="textBox" type="text" value="状态：只读 | 前端开发网(W3Cfuns.com)!"
readonly/>
</div>
</body>
</html>
* 本帖属于W3Cfuns原创，转载者请在明显的地方加入W3Cfuns的链接，不可只有文字没有链接，请尊重
他人的劳动成果！否则我们将追究其责任。
* 看贴回贴是一种美德，看在为大家免费整理发帖很久的份上，大家回个贴（请不要回复诸如此类的：
“顶”，“沙发”等无意义的回复）
前三节我们学习了form元素的状态伪类选择器，今天我们再来学习一下复选框和单选框的选择器，
以下选择器Opera支持最好！
:default选择器、:checked选择器和:indeterminate选择器
:default状态伪类选择器用来指定当前元素处于非选取状态的单选框或复选框的样式；
:checked状态伪类选择器用来指当前元素处于选取状态的单选框或复选框状态的样式；
:indeterminate状态伪类选择器用来指定当页面打开时，某组中的单选框或复选框元素还没有选取状态
的时样式；
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-状态伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
body{margin-bottom:20px; font-size:14px;}
#content{margin:30px auto; padding:10px; width:300px; overflow:hidden;}
label{display:inline; margin-bottom:5px; width:150px; height:25px; line-
height:25px; float:left;}
input[type=checkbox]:default{border:2px #00f solid;}
input[type=checkbox]:checked{border:2px #f00 solid;}
input[type=radio]:indeterminate{border:2px #0ff solid;}
</style>
</head>
<body>
<div id="content">
<label for="checkbox1"><input id="checkbox1" name="web" type="checkbox"
checked/>前端</label>
<label for="checkbox2"><input id="checkbox2" name="web" type="checkbox"/>前端开
发</label>
<label for="checkbox3"><input id="checkbox3" name="web" type="checkbox"/>web前
端开发</label>
<label for="checkbox4"><input id="checkbox4" name="web" type="checkbox"/>前端开
发网</label>
<label for="checkbox5"><input id="checkbox5" name="web"
type="checkbox"/>W3Cfuns</label>
<label for="radio1"><input id="radio1" name="web" type="radio"/>男</label>
<label for="radio2"><input id="radio2" name="web" type="radio"/>女</label>
</div>
</body>
</html>
::selection选择器：
此选择器使用了两个“:”不是笔误，它的标准写法就是这样；作用主要是用来指定元素处于选中状
态时的样式，案例如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-状态伪类选择器[五] | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
body{margin-bottom:20px; font-size:14px;}
p{height:30px; line-height:30px; font-family:"Microsoft Yahei";}
p::selection{color:#fff; background:#900;}/*当文字选中时，背景红色
，字体颜色为白色*/
</style>
</head>
<body>
<p>前端开发网(W3Cfuns.com)!</p>
<p>W3CSchool，web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
</p>
<p>CSS3每日一练之选择器-状态伪类选择器[五] | 前端开发网(W3Cfuns.com)!</p>
</body>
</html>
Element ~ 兄弟元素
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-兄弟元素选择器 | 前端开发网(W3Cfuns.com)!</title>
<style type="text/css">
*{margin:0; padding:0;}
body{margin-bottom:20px; font-size:14px; font-family:"Microsoft Yahei";}
p{height:30px; line-height:30px;}
div ~ span{display:block; margin-bottom:5px; height:22px; line-height:22px;
color:#fff; background:#900;}
</style>
</head>
<body>
<span>此span为div之前的兄弟元素</span>
<span>此span为div之前兄弟元素</span>
<div>
前端开发网(W3Cfuns.com)!
<p>W3CSchool，web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！
</p>
<span>此span为div的子元素</span>
<p>CSS3每日一练之选择器-状态伪类选择器[五] | 前端开发网(W3Cfuns.com)!</p>
<span>此span为div的子元素</span>
</div>
<span>此span为div之后的兄弟元素</span>
<span>此span为div之后的兄弟元素</span>
<span>此span为div之后的兄弟元素</span>
</body>
</html>
