html - 如何优化css样式

Question

我有多个具有相同内部元素的元素组，只有具有不同 id 的组容器。为了给组元素设置样式，我获得了一个 CSS 代码，其中包含大约 50 个具有相同父 ID 的类，我想知道是否有可能不重写相同父 ID 的 50 次。

下面是一个只有 6 个元素的 2 个组的简单示例。

[data-id="15HB2mz7"] .class-01,
[data-id="15HB2mz7"] .class-02,
[data-id="15HB2mz7"] .class-03,
[data-id="15HB2mz7"] .class-04,
[data-id="15HB2mz7"] .class-05,
[data-id="15HB2mz7"] .class-06 {
  color: red;
}

[data-id="58lmB1M"] .class-01,
[data-id="58lmB1M"] .class-02,
[data-id="58lmB1M"] .class-03,
[data-id="58lmB1M"] .class-04,
[data-id="58lmB1M"] .class-05,
[data-id="58lmB1M"] .class-06 {
  color: blue;
}

<!-- Group 01 -->
<div data-id="15HB2mz7">
  <div class="class-01">
    <div class="class-02">
      <div class="class-03">
      </div>
    </div>
  </div>
  <div class="class-04">
    <div class="class-05">
      <div class="class-06">
      </div>
    </div>
  </div>
</div>

<!-- Group 02 -->
<div data-id="58lmB1M">
  <div class="class-01">
    <div class="class-02">
      <div class="class-03">
      </div>
    </div>
  </div>
  <div class="class-04">
    <div class="class-05">
      <div class="class-06">
      </div>
    </div>
  </div>
</div>

Answer 1

一秒钟怎么样attribute selector仅针对类属性？您也可以使用前缀属性选择器使其更具体一些。

[data-id="15HB2mz7"] [class^="class-"] {
  color: red;
}

[data-id="58lmB1M"] [class^="class-"] {
  color: blue;
}

<!-- Group 01 -->
<div data-id="15HB2mz7">
  <div class="class-01">
    <div class="class-02">
      <div class="class-03">
      </div>
    </div>
  </div>
  <div class="class-04">
    <div class="class-05">
      <div class="class-06">test
      </div>
    </div>
  </div>
</div>

<!-- Group 02 -->
<div data-id="58lmB1M">
  <div class="class-01">
    <div class="class-02">
      <div class="class-03">test
      </div>
    </div>
  </div>
  <div class="class-04">
    <div class="class-05">
      <div class="class-06">
      </div>
    </div>
  </div>
</div>