点击刷新
css让div显示不同内容
思路：
1、使用nth-of-type伪类选择器选择不同的div；
2、使用::before伪类元素添加不同内容即可。
（相关课程推荐：css视频教程）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*设置统一的div样式， 也可以单独设置*/
div{
color: #fff;
width: 100px;
height: 100px;
margin: 8px;
background: skyblue;
}
/* 选中第一个div 设置一个背景用于区分 下同 */
div:nth-of-type(1){
background: red;
}
/* 利用伪类元素 添加不同的内容到div中 */
div:nth-of-type(1)::before{
content: "这是div1的内容";
}
div:nth-of-type(2){
background: pink;
}
div:nth-of-type(2)::before{
content: "这是div2的内容";
}
div:nth-of-type(3){
background: green;
}
div:nth-of-type(3)::before{
content: "这是div3的内容";
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
© 著作权归作者所有
举报
发表评论
0/200
