如何链接具有多个父类的 CSS 类选择器？

Question

如果 HTML 是这样的：

-section1
--h1
--h2
--h3
--section2
--h1
--h2
--h3
-section3
--h1
--h2
--h3
--section4
--h1
--h2
--h3

如果我们想给section1,section2,section3相同的风格和section4不同的风格，我们应该怎么做？用简短的代码。

我写了这样的代码

.section1 .h1,
.section1 .h2,
.section1 .h3,
.section2 .h1,
.section2 .h2,
.section2 .h3,
.section3 .h1,
.section3 .h2,
.section3 .h3,{
     color: blue;
}

但是它太长了，看起来很糟糕，有没有什么简短的方法可以写这个。

Answer 1

最短的 vanilla CSS 代码是通过使用

section

属性选择器选择所有以

[class^="..."]

开头的元素。然后专门覆盖第 4 节的样式：

[class^="section"] h1,
[class^="section"] h2,
[class^="section"] h3 {
  color: blue;
}

.section4 h1,
.section4 h2,
.section4 h3 {
  color: red;
}

<section class="section1">
  This is Section 1
  <h1>Headline 1</h1>
  <h2>Headline 2</h2>
  <h3>Headline 3</h3>
</section>
<section class="section2">
  This is Section 2
  <h1>Headline 1</h1>
  <h2>Headline 2</h2>
  <h3>Headline 3</h3>
</section>
<section class="section3">
  This is Section 3
  <h1>Headline 1</h1>
  <h2>Headline 2</h2>
  <h3>Headline 3</h3>
</section>
<section class="section4">
  This is Section 4
  <h1>Headline 1</h1>
  <h2>Headline 2</h2>
  <h3>Headline 3</h3>
</section>

或者，您也可以使用像 SASS 这样的预处理器：

[class^="section"] {
  h1, h2, h3 {
    color: blue;
  }
}

.section4 {
  h1, h2, h3 {
    color: red;
  }
}