问在伪元素创建孪生圆之后
EN

Stack Overflow用户

提问于 2014-07-28 19:34:58

回答 1查看 413关注 0票数 1

在这里，我做了一个简单的css .but实验，这让我对css伪元素的行为感到好奇，比如:在容器圆内有一个旋转的半圆，这是可以的，直到:before.Here，我想用now.But创建另一个圆圈，在伪element.But之后，它创建了两个黑色的圆圈，但是应该只有一个circle.From，另一个兄弟姐妹来自哪里?为什么？以及如何解决这个问题

小提琴

<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>

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-28 19:37:47

#container :after选择器没有指定:after应用于哪个元素，因此它同时应用于div#mydiv和div#right。

只需删除空格：#container:after

这将只将:after元素应用于#容器，而不是它的子元素&后代。

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25002936

复制

相似问题

问在伪元素创建孪生圆之后
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在伪元素创建孪生圆之后EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在伪元素创建孪生圆之后
EN