css - 如何更改子元素的::之后

Question

我有一个父元素和一些子元素，但我不能直接更改它们的 CSS。所以，我试图在父元素的 CSS 中更改我 child 的 CSS。示例:

.parent {
     & .child {
          ::after {
               width: 100%;
               background-color: black;
          }
     }
}

这只是一个简单的例子来说明我想改变我的 child ::after伪元素。

我该怎么做？

Answer 1

正如 Bryce 指出的那样，您不是在此处编写 CSS，而是使用浏览器无法理解的 CSS 预处理器语言编写。

SCSS你写的意思是:

The ::after pseudo-element of an element with both the .parent class and the .child class.

这就是 SCSS 中的符号 (&) 的含义:前面的选择器和后面的选择器。

所以从字面上看，您应该将其转换为以下 CSS:

.parent.child::after {
  width: 100%;
  background-color: black;
}

请注意，.parent 和.child 之间没有空格。这是表达需要两个类的和行为的方式。

但是，您的意思可能是:

The ::after pseudo-element of a .child element of a .parent element.

应该是

.parent > .child::after {
  width: 100%;
  background-color: black;
}

或更宽松(允许在 .parent 和 .child 之间的层次结构中有任意数量的元素):

.parent .child::after {
  width: 100%;
  background-color: black;
}

(注意.parent和.child之间的空格)