html - 从特定元素继承的 CSS

Question

在CSS是否可以使用 inherit从特定元素继承的属性？

例如有没有CSS可以让这个 <p> 的语法从 container1 而不是 container2 继承？假设没有原因搜索了很长时间才找到这个，但我希望你能证明我是错的。

.container1{
 color: blue
}

.container2{
 color: green
}

.p {
 color: inherit;
}

<div class="container1">
 <div class="container2">
  <p>
    foo
  </p>
 </div>
</div>

Answer 1

要防止元素从其父元素继承，您可以使用 :not() 显式地将其从其父元素的 CSS 中排除。 伪类:

例如:

.container2 :not(p) {
  color: green;
}

片段:

.container1 {
  color: blue;
}

.container2 :not(p) {
  color: green;
}

<div class="container1">
  <div class="container2">
    <p>
      Feeling rather blue today.
    </p>
    <span>
      It's not easy being green.
    </span>
  </div>
</div>