文章资料来自于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. yarn环境跑mapreduce报错某个container 600s未报告进度超时被杀

    问题: 发现每次reduce阶段跑到98%,相关的container被杀.报出的log大概的意思:container 600s未报告进度超时被杀 解决的方法: 在mapreduce程序里加上 conf ...

  2. [Linux]于Mac在配置Linuxserver安装Nginx+PHP

    Linux 安装Debian系统 我安装的是Debian7.5的系统,Debian的软件包管理和升级十分方便,并且系统也非常稳定. 安装盘能够去华中科技大学镜像.网易开源镜像站或者中国科技大学镜像下载 ...

  3. 解决github访问问题

    github这是个好地方.但是,上不去就蛋疼. 今天github上不去,果断f12下,看下network.发现里面好多请求都是指向 github.global.ssl.fastly.net这个域名的, ...

  4. debian软件安装基础（同tomcat案件）

    基本介绍 笔者是一个Linux盲.一旦只在虚拟机上载通过Ubantu-图形版本,我看着接口.打了几场比赛卸载的光盘上. 往下看,在过去的几天.试想想,在Linux关于建设nexus(mavenPW)玩 ...

  5. HDU 1026 Ignatius and the Princess I 迷宫范围内的搜索剪枝问题

    这个问题是一个典型的类型的问题迷宫广泛的搜索. 在网上看到了很多解决方案. 没什么解决问题的分析报告,不指出其中的关键点.代码更像是一大抄.一些分析师也有很大的文章分析.只是不要全部命中关键,什么是广 ...

  6. 微软MVP社区夏日巡讲诚邀您的参与： 北京，上海，西宁，成都，西安

  7. Android中部署自己的su

    本人博客原文 首先把你的自己的su的放到Android应用程序project的assets文件夹,为了和系统的su区分,我自己的su文件叫做sur. 另外我这里没有考虑x86架构的cpu的手机. 废话 ...

  8. [LeetCode] Longest Palindrome Substring 具体分析

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  9. extjs每一个组件要设置唯一的ID

    extjs每一个组件要设置唯一的ID,否则会造成各种错误 EXTJS基本上是靠ID来识别组件的,假如你在panel1中有个ID:"keyword"的textfield,而panel ...

  10. POJ 1252 Euro Efficiency

    背包 要么 BFS 意大利是说给你几个基本的货币,组成 1~100 所有货币,使用基本上的货币量以最小的. 出口 用法概率.和最大使用量. 能够BFS 有可能 . 只是记得数组开大点. 可能会出现 1 ...