Question

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

下面是一个仅包含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

仅对class属性使用第二个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>

如何优化CSS样式

1 个答案: