文章资料来自于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>

CSS3 选择器读解的更多相关文章

  1. css3选择器详解

    css中除了早先最早的,ID选择器,class选择器一些以外在css3中新加入了新的选择器,新选择器的使用大大的方便了我们的编程,下面我就说一些css3的选择器的使用方法, p       选择了所有 ...

  2. [CSS3] 学习笔记-CSS3选择器详解（一）

    1.属性选择器 在CSS3中,追加了3个属性选择器,分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. <!doctype html> ...

  3. CSS3 基础(1)——选择器详解

    CSS3选择器详解 一. 属性选择器 在CSS3中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. 选择器 示例 描述 ...

  4. css3笔记系列-3.css中的各种选择器详解，不看后悔系列

    点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...

  5. css3 选择器（三）

    接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...

  6. CSS3选择器的研究，案例

    在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...

  7. CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  8. web前端学习（三）css学习笔记部分（6）-- 选择器详解

    9.选择器详解 9.1  属性选择器 CSS3 属性选择器,在 CSS3 中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概 ...

  9. 常见CSS3选择器和文本字体样式汇总

    常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读css选择器四大类:基本.组合.属性.伪类对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且 ...

随机推荐

  1. 开源 自由 java CMS - FreeCMS2.0 举APP产生信息数据

    项目地址:http://www.freeteam.cn/ 生成信息数据 生成当前管理网站下同意移动APP訪问的栏目的信息页面. 从左側管理菜单点击生成信息数据进入. 您能够选择须要生成的栏目,然后点击 ...

  2. poj 1975 Median Weight Bead（传递闭包 Floyd）

    链接:poj 1975 题意:n个珠子,给定它们之间的重量关系.按重量排序.求确定肯定不排在中间的珠子的个数 分析:由于n为奇数.中间为(n+1)/2,对于某个珠子.若有至少有(n+1)/2个珠子比它 ...

  3. SqlServer 添加列并赋值

    有个需求,需要给某张表添加一列并且赋值,分解需求,一共分两部走: 添加列 赋值 两个功能都不难,很快实现. --add column alter table Med_Summary_Template ...

  4. 使用hql当异常查询：Xxx is not mapped[from Xxx where ...]

    采用当今项目hql询问.出现    QingAoCenterInfo is not mapped[from QingAoCenterInfo where...] 显然地Hibernate映射关系出现了 ...

  5. Jquery在线咨询地址

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=&quo ...

  6. Spring 通过来AOP 实现前置，环绕，异常通知，注解（转）

    本节主要内容:     1. Spring AOP前置通知案例     2. Spring AOP环绕通知案例     3. Spring AOP异常通知案例     4. Spring AOP注解使 ...

  7. PHP 闭包函数 function use 使用方法实例

    /** * @param string $hisStart * @param string $hisEnd * @param int $range * @param string $format * ...

  8. 【Android】九宫格实现

    第一步,布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  9. SSIS从理论到实战,再到应用(1)----创建自己的第一个包

    原文:SSIS从理论到实战,再到应用(1)----创建自己的第一个包 其实,如果你使用sql2008的导出导入工具的时候,你就已经在使用包了. 目标:使用sql2008 导入导出工具,导入excel数 ...

  10. JS 添加到事件的多个对象

    费周折码如下面: 方法一: <em>v</em>ar pArys=document.getElementsByClassName("ps"); for(va ...