Question

这里我正在用css做一个简单的实验。但是这让我对css伪元素的行为感到好奇，比如：after＆amp; ：之前。在容器圈里面会有一个rotatin半圈，直到现在都可以。但是我想用伪元素创建另一个圆圈。但是它创建了两个黑色圆圈，但是应该只有一个圆圈从其他兄弟姐妹来自哪里？为什么？以及如何解决这个问题

jsfiddle

<html>
<head>
<style>
#mydiv{
width:200px;
height:100px;
position:relative;
border-radius:0 0 100px 100px ;
background:blue;
left:50px;
top:50px;
animation:rot 4s infinite;

}
@keyframes rot{
  0%{
     transform:rotate(0deg);
  }100%{
     transform:rotate(-360deg);
  }

}
#container{
   overflow:hidden;
   width:200px;
   height:200px;
   position:absolute;
   border-radius:70%;
   background:red;
   left:500px;
   top:400px;


}
#container :after{
 content:'';
 display:block;
 width:60px;
 height:60px;
 border-radius:60%;
 background:black;
position:relative;
left:20px;

}
</style>
</head>
<body>
<div id='container'>
<div id='mydiv'></div>
<div id='right'></div>
</div>
</body>
</html>

Answer 1

#container :after选择器未指定:after适用的元素，因此它适用于div#mydiv和div#right。

只需删除空格：#container:after

这只会将：after元素应用于#container，而不是它的子元素＆amp;后代。

：伪元素后创建双圈

1 个答案: