这篇博客探讨了CSS中的nth-child和nth-of-type选择器的区别，以及它们在实际布局中的应用。同时，详细解释了伪元素::before和::after的用法，并通过实例展示了如何在元素前后插入内容。
<!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>
/* 区别nth-child nth-of-child */
/* nth-child 会把所有盒子都排序号
执行的时候先看 :nth-child(1) 之后回去看前面的div */
section li:nth-child(1){
background-color: rebeccapurple;
}
/* nth-child 会把指定的盒子都排序号
执行的时候先看 :nth-child(1) 之后回去看前面的div */
section li:nth-of-type(1){
background-color: red;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* 伪元素 在文本中找不到 */
div::before {
/* content必须要写 */
content: '我是';
}
div::after {
content: '爸爸';
}
</style>
</head>
<body>
<section>
<p>大宝</p>
<li>熊大</li>
<li>熊二</li>
</section>
<div>
光头强
</div>
</body>
</html>
扫一扫
3788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
