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(2)将不会选择任何元素。
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 个子节点,从后向前计算
E:nth-of-type(n) 表示 E 父元素中的第 n 个子节点,且标签是 E
这个和 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>实例新浪头部导航
<!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>
