时间戳

首页 > 解决方案 > 如何优化css样式

html - 如何优化css样式

问题描述

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

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

[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>

标签： htmlcssoptimization

解决方案

仅用于类属性的第二个属性选择器怎么样？您也可以使用前缀属性选择器来更具体一点。

[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>

推荐阅读