css3 伪类选择器
写法格式
选择器:xxx {
}
常用
E:first-child | 第一个孩子 |
---|---|
E:last-child | 最后一个孩子 |
E:nth-child(n) | 第n个孩子(n可以是数字,可以是关键字如even偶数、odd奇数等,也可以是表达式,如2n,2n+1,-n+5(前五个)等) |
E:last-of-type | 最后一个孩子 |
E:first-of-type | 第一个孩子 |
E:nth-of-type(n) | 第n个孩子,与E:nth-child(n)相同 |
注意:
E:nth-child(n)与E:nth-of-type(n)是有区别的,E:nth-child(n)是同时确定选择器和n的,当两个条件冲突时,则不执行;E:nth-of-type(n)则是先确定选择器,在选中n,后执行结果。
例子:
<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>damoe</title>
<style>
.diyi li:first-child {
color: aquamarine;
}
.diyi li:last-child {
color: blue;
}
.diyi li:nth-child(4) {
color: brown;
}
/* 偶数行,可以写成表达式 2n */
.dier li:nth-child(even) {
background-color: rgb(127, 215, 218);
}
/* 奇数行,可以写成表达式 2n-1 */
.dier li:nth-child(odd) {
background-color: chocolate;
}
/* .disan的第一个孩子冲突并不是p标签,冲突,不执行 */
.disan p:nth-child(1) {
color: chocolate;
}
/* 先确定.disi中的p标签,在排序得到第一个孩子是sss,执行 */
.disi p:nth-of-type(1) {
color: chocolate;
}
</style>
</head>
<body>
<ul class="diyi">
<li>1孩子</li>
<li>2孩子</li>
<li>3孩子</li>
<li>4孩子</li>
<li>5孩子</li>
<li>6孩子</li>
</ul>
<ul class="dier">
<li>1孩子</li>
<li>2孩子</li>
<li>3孩子</li>
<li>4孩子</li>
<li>5孩子</li>
<li>6孩子</li>
</ul>
<div class="disan">
<span>xxx</span>
<p>sss</p>
<p>ccc</p>
</div>
<div class="disi">
<span>xxx</span>
<p>sss</p>
<p>ccc</p>
</div>
</body>
</html>
结果