1.:first-child 整个结构中的第一个
:last-child 整个结构中的最后一个
2.:first-of-type :last-of-type 这个元素类型的第一个和最后一个
3.:nth-child(n) 整个结构中的第n个
n可以写成2n或even，指的是偶数
2n-1或2n+1或odd是奇数
:nth-of-type(n) 这个类型的第几个
4.:nth-last-child(n):整个结构中倒数第几个
:nth-last-of-type(n) 这个类型的倒数第n个
5.:only-child 整个结构只有一个标签，其他标签都不存在
:only-of-child 整个结构中这个类型的只有一个
6.:empty 当元素内容为空时的设置
7.:root选择文档的根节点
:root和html的区别：
:root的优先级高于html，html是指html文档的根节点，但是root不一定指html，也可能是其他文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1:first-child{color:#ff0;}
h1:last-child{color:#ff0;}
div:first-of-type{color:#f00;}
div:last-of-type{color:#f00;}
div:nth-child(3){color:#0ff;}
div:nth-of-type(3){color:#00f;}
h1:nth-last-child(2){color:#999;}
div:nth-last-of-type(2){color:#f0f;}
</style>
</head>
<body>
<h1>1</h1>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
<div>div6</div>
<div>div7</div>
<div>div8</div>
<div>div9</div>
<div>div10</div>
<h1>2</h1>
<h1>3</h1>
</body>
</html>
1646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
