CSS3中多个类的前后伪

考虑一下这个HTML结构,其中 <div> 他们有孩子 <span> 和 <p> . 还有另一个 <跨度(>); 和 <p> 作为兄弟姐妹。

<div>
  <span>abc</span>
  <p>xyz</p>
</div>
<span>123</span>
<p>456</p>

例如,如果我们需要改变孩子们的颜色,我们可以在你的路上写,

div span, p{
  color: red;
}

这个问题是,它会改变兄弟姐妹的颜色 <p>456</p> 样式全局应用于所有段落标记时也是如此。

解决方法是遵循特异性,就像我们对 <跨度(>); 并将选择器写入

div span, 
div p{
  color: red;
}

同样的规则也适用于伪元素。因此 解决方案 是

[class*="divclass-"]::before, 
[class*="divclass-"]::after{
  border-radius: 50%;
  width: 30%;
  height : 30%;
  border: 3px solid red;
}

附注1

如果您正在使用SASS,您的语法可能是,

[class*="divclass-"]{
  &::before, 
  &::after{
    border-radius: 50%;
    width: 30%;
    height : 30%;
    border: 3px solid red;
  }
}

附注2

这个 before 和 after pesudo元素需要 content 所有物

希望这有帮助。

逗号并不意味着以下元素是同一选择器的子元素(此处为[class*=“divclass-”])。 它只允许您链接选择器。

@请参见 https://www.thoughtco.com/comma-in-css-selectors-3467052

以下是解决方案:

[class*="divclass-"]::before, 
[class*="divclass-"]::after {
      border-radius: 50%;
      width: 30%;
      height : 30%;
      border: 3px solid red;
      content: '';
}

<div class="divclass-1" style="height: 10px; width: 10px"></div>