您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
css3的兄弟选择器与结构伪类选择器
发布时间：2015-06-15 09:15:28编辑：雪饮阅读（）
兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>兄弟选择符 (E~F)</title>
<style>
h4~p{color:#f00;}
/*选择p标签的所有兄弟标签p，并使这些被选择的兄弟标签的文本内容变成红色。兄弟选择器只选择该标签之后的兄弟标签，而其之前的则不被选择*/
</style>
</head>
<body>
<div><!--该div是父元素-->
<p>中国十大杰出人物</p>
<p>①个人博客的孩子</p>
<h4>②个人博客的爸爸</h4>
<p>③个人博客的妈妈</p>
<p>④个人博客的老公</p>
<p>⑤个人博客的老婆</p>
<p>⑥个人博客的公公</p>
<p>⑦个人博客的婆婆</p>
<p>⑧个人博客的公司</p>
<p>⑨个人博客的领到</p>
<p>⑩个人博客的员工</p>
</div>
<!--注意:兄弟选择器选中的是【E标签之后】的所有兄弟F-->
</body>
</html>
兄弟选择器预览图：
结构伪类选择器
child系列：
first-child
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:first-child</title>
<style>
p:first-child{color:#f00;}
</style>
</head>
<body>
<div id="A">
<h4>我是父亲的第1个子元素，可惜我不是p标签，所以无法选中我</h4>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<p>我是父亲的第5个子元素</p>
</div>
<hr />
<div id="B">
<p>我是父亲的第1个子元素，并且我是p标签，所以我被选中了</p>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<p>我是父亲的第5个子元素</p>
</div>
<!--
注意：
1、写法是 p:first-child，而不是div:first-child
2、以div为例 ：div 是元素，<div> 是标签 不过就目前而言多数情况下都视为1种
该选择器的匹配步骤：
1、找到页面中的p元素 (任何标签内部第一个出现p元素)
2、找到该p元素的父亲元素 (找到div元素 一个是id为A的 一个是id为B的)
3、检测找到的p元素的父元素的第一个子元素类型 是否是p标签。
(找到2个div中的第一个子元素，id为A的第一个子元素是h3， id为B的第一个子元素是p)
id为A的div第1个子元素不是p标签：无法选中第一个子元素
id为B的div第1个子元素是p标签: 选中第一个子元素，定义颜色的样式对其生效
-->
</body>
</html>
结构性伪类选择符 E:first-child预览图：
last-child
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:last-child</title>
<style>
p:last-child{color:#f00;}
</style>
</head>
<body>
<div id="A">
<p>我是父亲的第1个子元素</p>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<h4>我是父亲的最后一个子元素，可惜我不是p标签，所以无法选中我</h4>
</div>
<hr />
<div id="B">
<p>我是父亲的第1个子元素</p>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<p>我是父亲的第5个子元素，并且我是p标签，所以我被选中了</p>
</div>
<!--
注意：
1、写法是 p:last-child，而不是div:last-child
2、以div为例 ：div 是元素，<div> 是标签 不过就目前而言多数情况下都视为1种
该选择器的匹配步骤：
1、找到页面中的p元素 (任何标签内部第一个出现p元素)
2、找到该p元素的父亲元素 (找到div元素 一个是id为A的 一个是id为B的)
3、检测找到的p元素的父元素的最后个子元素类型 是否是p标签。
(找到2个div中的最后一个子元素，id为A的最后一个子元素是h3， id为B的最后一个子元素是p)
结果：
id为A的div最后1个子元素不是p标签：无法选中第一个子元素h3
id为B的div最后1个子元素是p标签: 选中最后一个子元素p，定义颜色的样式对其生效
-->
</body>
</html>
结构性伪类选择符 E:last-child预览图：
nth-child(n)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:nth-child(n)</title>
<style>
/*li:nth-child(7){color:#f00;} 选中指定序号(正序)*/
/*li:nth-child(odd){color:#f00;} 选中奇odd偶even类型(正序)*/
/*li:nth-child(2n+1){color:#f00;} 选中自定义序列类型(正序)*/
li:nth-child(2n+1){color:#f00;}
</style>
</head>
<body>
<ul>
<li>我是爹地的第1个孩子</li>
<li>我是爹地的第2个孩子</li>
<li>我是爹地的第3个孩子</li>
<li>我是爹地的第4个孩子</li>
<li>我是爹地的第5个孩子</li>
<li>我是爹地的第6个孩子</li>
<li>我是爹地的第7个孩子</li>
<li>我是爹地的第8个孩子</li>
<li>我是爹地的第9个孩子</li>
<li>我是爹地的第10个孩子</li>
</ul>
<!--
这种选中方式是从父元素的角度查看所有的子元素，将所有子元素看做一个集合，并且编号，然后从包含所有子元素的集合中选取指定序号的元素(并且该元素类型为指定类型)，注意和E:nth-of-type(n)的区别
假设:
样式 li:nth-child(5){color:#f00}
内容
<ul>
<li>我是爹地的第1个孩子</li>
<li>我是爹地的第2个孩子</li>
<li>我是爹地的第3个孩子</li>
<li>我是爹地的第4个孩子</li>
<p>我是爹地的第5个孩子</p> 这是第五个元素 但是不是li标签，所以无法选中
<li>我是爹地的第6个孩子</li>
<li>我是爹地的第7个孩子</li>
<li>我是爹地的第8个孩子</li>
<li>我是爹地的第9个孩子</li>
<li>我是爹地的第10个孩子</li>
</ul>
-->
</body>
</html>
nth-child(n)预览图：
nth-last-child(n)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:nth-last-child(n)</title>
<style>
/*li:nth-last-child(2){color:#f00;}选中指定序号(倒序)*/
/*li:nth-last-child(even){color:#f00;}
选中奇odd偶even类型(倒序)*/
/*li:nth-last-child(3n+1){color:#f00;} 选中自定义序列类型(倒序)*/
li:nth-last-child(3n+1){color:#f00;}
</style>
</head>
<body>
<ul>
<li>我是爹地的第1个孩子</li>
<li>我是爹地的第2个孩子</li>
<li>我是爹地的第3个孩子</li>
<li>我是爹地的第4个孩子</li>
<li>我是爹地的第5个孩子</li>
<li>我是爹地的第6个孩子</li>
<li>我是爹地的第7个孩子</li>
<li>我是爹地的第8个孩子</li>
<li>我是爹地的第9个孩子</li>
<li>我是爹地的第10个孩子</li>
</ul>
<!--
这种选中方式是从父元素的角度查看所有的子元素，将所有子元素看做一个集合，并且编号，然后从包含所有子元素的集合中选取指定序号(倒数)的元素(并且该元素类型为指定类型)，注意和E:nth-last-of-type(n)的区别
假设:
样式 li:nth-last-child(5){color:#f00}
内容
<ul>
<li>我是爹地的第1个孩子</li>
<li>我是爹地的第2个孩子</li>
<li>我是爹地的第3个孩子</li>
<li>我是爹地的第4个孩子</li>
<li>我是爹地的第5个孩子</li>
<p>我是爹地的第6个孩子</p>这是倒数第五个元素 但是不是li标签，所以无法选中
<li>我是爹地的第7个孩子</li>
<li>我是爹地的第8个孩子</li>
<li>我是爹地的第9个孩子</li>
<li>我是爹地的第10个孩子</li>
</ul>
-->
</body>
</html>
nth-last-child(n)预览图：
only-child
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:only-child</title>
<style>
li:only-child{color:#f00;font-size:30px}
</style>
</head>
<body>
<ul id="A">
<li>我是父元素ul的唯一的子元素，独生子</li>
</ul>
<hr />
<ul id="B">
<li>我是父亲的第一个孩子，我不是独生子</li>
<li>我是父亲的第二个孩子，我不是独生子</li>
</ul>
<!--
当且仅当当指定元素是其父元素的唯一子元素的时候可以选中该子元素
-->
</body>
</html>
only-child预览图：
of-type系列：
first-of-type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:first-of-type</title>
<style>
p:first-of-type{color:#f00;}
</style>
</head>
<body>
<div id="A">
<h4>我是父亲的第1个子元素</h4>
<p>我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<p>我是父亲的第5个子元素</p>
</div>
<hr />
<div id="B">
<p>我是父亲的第1个子元素，我是父亲的第一个p标签所以我被选中了</p>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<p>我是父亲的第5个子元素</p>
</div>
<!--
注意:of-type系列和child系列不同之处在于：
child系列的元素序号是把父亲的所有子元素放在一个集合中，然后排序
例如: id="A"的div共有5个子元素，所以他们在child系列中的序号是
<div id="A">
① <h4>我是父亲的第1个子元素</h4>
② <p>
我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了
</p>
③ <p>我是父亲的第3个子元素</p>
④ <p>我是父亲的第4个子元素</p>
⑤ <p>我是父亲的第5个子元素</p>
</div>
of-type系列的元素序号是把指定的元素类型的所有同类元素放在一个集合中，然后排序。
例如: id="A"的div共有5个子元素，但是p元素只有四个，
所以p元素在of-type系列中的序号是
<div id="A">
<h4>我是父亲的第1个子元素</h4>
① <p>
我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了
</p>
② <p>我是父亲的第3个子元素</p>
③ <p>我是父亲的第4个子元素</p>
④ <p>我是父亲的第5个子元素</p>
</div>
所有的child和of-type都遵循此原则。
如果指定元素的所有兄弟元素都为同一类型(例如:ul内部子元素全部为li)，那么 child完全等于of-tyoe
-->
</body>
</html>
first-of-type预览图：
last-of-type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:last-of-type</title>
<style>
p:last-of-type{color:#f00;}
</style>
</head>
<body>
<div id="A">
<p>我是父亲的第1个子元素</p>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素，我是父元素倒数第一个p元素，所以我被选中</p>
<h4>我是父亲的第5个子元素</h4>
</div>
<hr />
<div id="B">
<p>我是父亲的第1个子元素</p>
<p>我是父亲的第2个子元素</p>
<p>我是父亲的第3个子元素</p>
<p>我是父亲的第4个子元素</p>
<p>我是父亲的第5个子元素，我是父元素倒数第一个p元素，所以我被选中了</p>
</div>
</body>
</html>
last-of-type预览图：
nth-last-of-type(n)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:nth-last-of-type(n)</title>
<style>
/*dt:nth-last-of-type(1){color:#f00;} 选中指定序号(倒序)*/
dt:nth-last-of-type(2){color:#f00;}
/*dt:nth-last-of-type(even){color:#f00;} 选中奇odd偶even类型(倒序)*/
/*dt:nth-last-of-type(3n+1){color:#f00;} 选中自定义序列类型(倒序)*/
</style>
</head>
<body>
<dialog>
<dt>吕秀才</dt>
<dd>有什么比吃一坨shi更恶心的事情</dd>
<dt>李大嘴</dt>
<dd>吃两坨</dd>
<dt>白展堂</dt>
<dd>有什么比吃2坨shi更恶心的事情</dd>
<dt>吕秀才</dt>
<dd>塞牙了</dd>
</dialog>
</body>
</html>
nth-last-of-type(n)预览图：
nth-of-type(n)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:nth-of-type(n)</title>
<style>
/*dt:nth-of-type(2){color:#f00;} 选中指定序号(正序)*/
dt:nth-of-type(2){color:#f00;}
/*dt:nth-of-type(odd){color:#f00;} 选中奇odd偶even类型(正序)*/
/*dt:nth-of-type(3n+1){color:#f00;} 选中自定义序列类型(正序)*/
</style>
</head>
<body>
<dialog>
<dt>吕秀才</dt>
<dd>有什么比吃一坨shi更恶心的事情</dd>
<dt>李大嘴</dt>
<dd>吃两坨</dd>
<dt>白展堂</dt>
<dd>有什么比吃2坨shi更恶心的事情</dd>
<dt>吕秀才</dt>
<dd>塞牙了</dd>
</dialog>
</body>
</html>
nth-of-type(n)预览图：
only-of-type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:only-of-type</title>
<style>
dt:only-of-type{color:#f00;font-size:30px}
</style>
</head>
<body>
<dialog>
<dt>李明：</dt>
<dd>不认真学习的孩纸都是耍流氓！</dd>
</dialog>
<!--
当指定元素是其父元素的唯一一个指定类型元素的时候可以选中该子元素
该实例中:dt是 dt的父元素dialog中唯一的一个dt元素，所以可以选中
-->
</body>
</html>
only-of-type预览图：
root
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>E:root 根选择器</title>
<style>
html:root{background:green}
/*先匹配根元素，再判断该根元素是否是html*/
</style>
</head>
<body>
<p>捣乱用的</p>
<!--在E:root跟选择器中，html页面的根永远都是html元素-->
</body>
</html>
效果就是整个网页背景是绿色，不用什么预览图了。
关键字词：css3,选择器,个人博客