div:after所添加的:after伪类是div子元素还是兄弟元素
来源：2-14 项目作业
王文辉
2020-03-11 23:16:06
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白兔动画</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="sky">
<div class="one-cloud"></div>
<div class="cloud two-cloud"></div>
<div class="cloud three-cloud"></div>
<div class="cloud foure-cloud"></div>
<div class="cloud five-cloud"></div>
</div>
<div class="meadow">
<!-- <div class="rabbit"> -->
<img src="images/rabbit.png" >
<!-- </div> -->
</div>
</body>
</html>
css代码：
*{
margin:0;
padding: 0;
}
:root{
/* 云朵的颜色 */
--cloud_color:#FFFFFF;
}
.sky{
height: 360px;
background:rgb(196, 228, 253);
background: linear-gradient(rgba(196, 228, 253,.9),rgba(196, 228, 253,.2) 80%,white);
position: relative;
}
.sky .one-cloud{
width: 100px;
height: 100px;
background-color: var(--cloud_color);
border: 1px solid var(--cloud_color);
border-radius: 100px/100px 100px 50px 50px;
position: absolute;
left: 100px;
top: 100px;
opacity: 1;
}
.sky .one-cloud:before{
content: '';
display: block;
width: 70px;
height: 80px;
background-color: var(--cloud_color);
border: 1px solid white;
border-radius: 100px/60px 180px 70px 100px;
transform: translate(-30px,20px) rotate(-57deg);
}
.sky .one-cloud:after{
content: '';
display: block;
width: 50px;
height: 50px;
background-color: var(--cloud_color);
border: 1px solid white;
border-radius: 100px/60px 180px 70px 100px;
transform: translate(76px,-37px) rotate(-57deg);
}
.meadow{
height: 240px;
background:rgb();
background: linear-gradient(white,rgba(148, 190, 89,.2) 20%,rgba(148, 190, 89,.9));
position: relative;
}
.meadow>img{
width: 180px;
position: absolute;
bottom: 50px;
right: 200px;
}
图中无opicty属性，可是伪类确实就设置了opicty属性。
div:after所添加的:after伪类是div子元素还是兄弟元素，为什么F12在伪类中看不到opacity但是继承了这个属性，伪类如何查看生效的样式？
1回答
-
好帮手慕粉
2020-03-12
同学你好，设置的before和after即不是兄弟元素，也不是子元素，是div元素的伪元素，可以在div的前后插入内容。老师这边给伪类设置opacity，是可以正常显示的：
同学可以再试一下。
祝学习愉快~
0
相似问题