css - 简化了 ID 和子组合器

Question

我有 7 个具有相同子组合器的 ID，我该如何简化它，这样我就不必像下面这样写出来:

#section-monday > div > div > div:nth-child(1),
#section-tuesday > div > div > div:nth-child(1),
#section-wednesday > div > div > div:nth-child(1),
... {}

我能否以某种方式对 ID 进行分组并使用子组合器仅跟随它们一次？

喜欢

"#section-monday, #section-tuesday, #section-wednesday" > div > div > div:nth-child(1){}

Answer 1

您可以使用部分 id 文本作为选择器， 但是在这种情况下你应该使用一个类

[id*="section-"] > div > div > div:nth-child(1){
border:1px solid red;
}

<div id="section-monday">
  <div>
    <div>
      <div>
        :D
      </div>
      <div>
        :(
      </div>
    </div> 
  </div> 
</div>
<div id="section-tuesday">
  <div>
    <div>
      <div>
        :D
      </div>
      <div>
        :(
      </div>
    </div> 
  </div> 
</div>
<div id="section-monday">
  <div>
    <div>
      <div>
        :D
      </div>
      <div>
        :(
      </div>
    </div> 
  </div> 
</div>
<div id="section-wednesday">
  <div>
    <div>
      <div>
        :D
      </div>
      <div>
        :(
      </div>
    </div> 
  </div> 
</div>