CSS伪类
::before/ after
在一个元素标签的前面或者后面, 创建一个新的虚拟的标签, 我们可以给这个虚拟的标签增加样式, 也可以增加内容等...
.box p::before {
display: block;
height: 30px;
line-height: 30px;
text-align: center;
content: "lemon before";
background: lightblue;
}
.box p::after {
display: block;
height: 30px;
line-height: 30px;
text-align: center;
content: "lemon after";
background: lightgreen;
}
::nth-child(n)
匹配属于其父类的第N个子元素, 不论元素的类型, n可以是数字, 关键词或公式
.list li:nth-child(4n + 1) {
background-color: yellowgreen;
}
.list li:nth-child(4n + 2) {
background-color: lightskyblue;
}
.list li:nth-child(4n + 3) {
background-color: lightsalmon;
}
.list li:nth-child(4n + 4) {
background-color: lightslategrey;
}
清除浮动
.clear {
zoom: 1;
}
.clear::after {
display: block;
0;
height: 0;
content: "";
overflow: hidden;
clear: both;
}
获取伪类样式
var boxP = document.getElementById("boxP");
console.log(window.getComputedStyle(boxP, "before").content);
"lemon before"
整个HTML文件
<!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>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
margin: 100px;
padding: 30px;
200px;
height: 200px;
border: 10px solid green;
}
.box p {
line-height: 30px;
}
.box p::before {
display: block;
height: 30px;
line-height: 30px;
text-align: center;
content: "lemon before";
background: lightblue;
}
.box p::after {
display: block;
height: 30px;
line-height: 30px;
text-align: center;
content: "lemon after";
background: lightgreen;
}
.clear {
zoom: 1;
}
.clear::after {
display: block;
0;
height: 0;
content: "";
overflow: hidden;
clear: both;
}
.list {
300px;
margin: 20px auto;
padding: 20px;
border: 1px solid;
}
.list li {
float: left;
100px;
height: 100px;
}
/* .list li:nth-child(odd) {
background-color: yellowgreen;
}
.list li:nth-child(even) {
background-color: lightskyblue;
} */
.list li:nth-child(4n + 1) {
background-color: yellowgreen;
}
.list li:nth-child(4n + 2) {
background-color: lightskyblue;
}
.list li:nth-child(4n + 3) {
background-color: lightsalmon;
}
.list li:nth-child(4n + 4) {
background-color: lightslategrey;
}
ul,
li {
list-style: none;
}
</style>
<body>
<div class="box">
<p id="boxP">
要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界是公平的，每个人都是通过自己的努力，去决定自己生活的样子
</p>
</div>
<ul class="list clear">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
var boxP = document.getElementById("boxP");
console.log(window.getComputedStyle(boxP, "before").content);
</script>
</html>
效果
