Question

如何分配＆amp;在伪类到多个CSS类之前

例如：

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

Answer 1

逗号并不意味着以下元素是同一个选择器的子元素（这里[class * =＆＃34; divclass - ＆＃34;]）。它只允许你链接选择器。

@see https://www.thoughtco.com/comma-in-css-selectors-3467052

以下是解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

考虑这种HTML结构，其中<div>包含子和。另一个和作为兄弟姐妹。

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

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

div span, p{
  color: red;
}

这个问题是，当样式全局应用于所有段落标记时，它也会改变兄弟456的颜色。

解决方案是像一样遵循特异性并将选择器写为

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属性。

希望这有帮助。

CSS3中的After-Before伪为多个类

2 个答案: