1、结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 940px;
height: 200px;
margin:0 auto;
background-color: darkgray;
}
.box div{
width: 300px;
height: 100px;
margin-right: 20px;
background-color: aqua;
float: left;
}
.box div:last-child{
/* 选中box里的div中的最后一个孩子标签 */
margin-right: 0;
}
</style>
</head>
<body>
<!-- 通过某种结构关系查找页面元素
比如:
匹配某元素第一个子元素
匹配某元素最后一个子元素
-->
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
2、伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:first-child{
/* ul中的第一个li */
list-style: none;
}
li:last-child{
/* ul中的最后一个li元素 */
background-color: rgb(149, 160, 84);
color: rgb(80, 2, 2);
}
/* 第几个
li:nth-child(3){
background: darkolivegreen;
} */
li:nth-child(even){
/* 第几个,表示偶数:2n/even
表示奇数:2n+1 2n-1(odd)
*/
background: rgb(160, 47, 28);
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
</ul>
</body>
</html>
3、独生子女
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid goldenrod;
}
/* div p{
background-color: brown;
} */
/* 全都会有棕色的背景色 */
div p:only-child{
background-color: brown;
}
/* 仅有只有一个p标签的div元素会被选中 */
</style>
</head>
<body>
<div>
<p>1111</p>
<p>2222</p>
</div>
<div>
<p>1111</p>
</div>
</body>
</html>
4、空状态-empty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: burlywood;
}
div:empty{
background-color: brown;
}
/* div:empty 给没有孩子标签的元素设置上背景色
但要注意的一点是:不要给div中加入空格符,否则无法生效,因为空格符也属于内容,有内容它就会认为有孩子,
只有一点东西都没有的才会生效
*/
</style>
</head>
<body>
<div>1111</div>
<div></div>
</body>
</html>
5、根节点-root
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* html,body{
height: 100%;
background-color: darkblue;
} */
/* html可以被根节点:root所代替,效果是一样的,:root=html */
:root,body{
height: 100%;
background-color: darkblue;
}
</style>
</head>
<body>
</body>
</html>