CSS3伪类选择器案例详解
·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="d1"></div>
<div class="d2">
<span class="span1">span1</span>
<span class="span2">span2</span>
<span class="span3">span3</span>
<span class="span4">span4</span>
</div>
<div class="d3">
<p class="p1">P1</p>
<p class="p2">P2</p>
<p class="p3">P3</p>
<p class="p4">P4</p>
</div>
</body>
</html>CSS3伪类选择器应用
<style>
div {
background-color: green;
width: 200px;
height: 200px;
border: red 2px solid;
}
span:first-child {
color: yellow;
}
span:last-child {
color: brown;
}
span:nth-child(2) {
color: pink;
}
p:nth-of-type(2) {
color: blueviolet;
}
p:first-of-type {
color: aqua;
}
div:empty {
background-color: pink;
}
:root {
background-color: red;
}
</style>
码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)