CSS3结构性伪类
- E:nth-child(n)表示E的父元素中的第n个子节点
从1开始他先找到父元素下面对应子节点的个数，然后再找是否是E标签
他必须满足2点第一点是E标签的元素，第二点是必须是第N个元素
<section>
<div>我是一个普通的div标签</div>
<span>我是一个普通的span标签</span>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
p:nth-child(odd){background:red;} //表示匹配奇数行
p:nth-child(even){background:red;} //表示匹配偶数行
p:nth-child(2n){background:red;} //里面是公式，n从0开始计算但是nth-child(0)他找不到。所以从1才开始了
E:nth-last-child(n)表示E父元素中的第n个子节点,从后向前计算
这个和nth-child(n)不一样。他先找到的E标签然后再找到对应的个数
- E:nth-last-of-type(n)表示E父元素的第n个节点,且类型是E从后向前计算
- E:empty表示E元素中没有子节点.注意子节点包含文本节点
- E:first-child 表示E元素中第一个子节点
- E:last-child表示E元素中最后一个子节点
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>CSS3结构</title>
</head>
<style>
*{margin:0px;padding:0px;}
p:nth-child(1){background:red;}
p:nth-child(2){background:red;} /*这样就找不到因为第二个元素不是P而是h1*/
p:nth-of-type(3){background:red;} /*这个就是找到P元素的父元素下面P标签的第三个*/
p:nth-last-child(1){background:blue;} /*这个表示倒数第一个*/
h1:nth-last-of-type(1){background:yellow;} /*这个表示找到里面的h1倒数第一个*/
</style>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p></p>
<p>p5<span></span></p>
<p><span></span><a href="#">链接</a></p>
</body>
</html>
实例新浪头部导航
2017-05-03_115109.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪头部导航</title>
<style>
.list {margin: 0; padding: 0; list-style: none;}
.list li {width: 150px; border-right: 1px solid #000; float: left;}
.list li:last-of-type {border: none;}
.list a {float: left; width: 40px; margin: 0 5px; font: 12px/30px "宋体"; text-align: center;}
.list li a:nth-of-type(3n+1) {font-weight: bold;}
.list li:nth-child(3) a:nth-child(2) {color: red;}
</style>
</head>
<body>
<ul class="list">
<li>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
</li>
<li>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
</li>
<li>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
</li>
<li>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
</li>
<li>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
</li>
<li>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
</li>
<li>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
</li>
</ul>
</body>
</html>
