Question

我需要在同一个css文件中实现多种颜色方案。为了使HTML尽可能地保持苗条，我想在主体中添加一个css类，以确保该方案正在显示。工作正常。

现在，还需要选择在页面内的内容上定义颜色集，并在主体上使用预定义的颜色方案类。由于通过定义优先考虑css规则，这并不总是有效。问题是，如何防止这种情况，而不是为每种情况定义多种方式的类。

示例：

＆＃13;

<style>
.bg-sub {
  width: 100px;
  height: 100px;
  background: lightyellow;
 }

.red .bg-sub {
  background: red;
}
.green .bg-sub {
    background: green;
}
.blue .bg-sub {
    background: blue;
}
// more scheme-classes ...

</style>

<div id="thebody" class="green">
   <div class="red">
      <div class="bg-sub"></div>
   </div>
   <div class="blue">
      <div class="bg-sub"></div>
   </div>
</div>

＆＃13;

而＆＃34;蓝＆＃34;被div采用，＆＃34; red＆＃34; ISN＆＃39;吨。我希望能够使用嵌套的方案类。我希望能说明我想要的东西。

目前，我看到的最好方法是使用第二个css文件作为主方案，而不是主体类，并使用第一个文件的颜色类。这意味着，颜色定义会被制作两次。

我监督的任何事情？什么是最优雅的方式？

Answer 1

由于问题未提及所需的浏览器支持，假设只有“当前”浏览器设置就足够了，那么这将是CSS variables的确切用例：

.red {
  --bg: red;
}

.green {
  --bg: green;
}

.blue {
  --bg: blue;
}

.bg-sub {
  background-color: var(--bg);
}


/* demonstrative */

div {
  border: 1px solid black;
  padding-left: 1em;
  text-shadow: 0 0 10px #fff;
  color: #000;
  background-color: #fff;
}

div[class]::before {
  content: '.' attr(class);
  display: block;
}

<div class="green">
  <div class="x">
    <div class="bg-sub">(should be green)</div>
    <div class="red">
      <div class="x">
        <div class="blue">
          <div class="x">
            <div class="bg-sub">(should be blue)</div>
          </div>
        </div>
      </div>
      <div class="x">
        <div class="x">
          <div class="x">
            <div class="bg-sub">(should be red)</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

我认为你的问题是你可以任意地嵌套那些不同的“颜色”类，而CSS只需要尊重最内层的那些，对吗？

<div class="green">
  <div class="x">
    <div class="x">
      <div class="red">
        <div class="x">
          <div class="x">
            <div class="blue">
              <div class="x">
                <div class="bg-sub"></div> <!-- should be blue -->
              </div>
            </div>
          </div>
        </div>
        <div class="bg-sub"></div> <!-- should be red -->
      </div>
    </div>
  </div>
</div>

问题是CSS不知道哪些类是确定颜色的重要类。没有CSS选择器说“红色”，“蓝色”或“绿色”中最内层的一个。

所以我要做的就是给每个彩色班级一个新班级，确定他们是有色班级，比如说colour，然后用它们来选择。
为了与上面的例子保持一致，

.bg-sub {
  width: 100px;
  height: 100px;
  background: lightyellow;
}

.red .bg-sub, .colour .red .bg-sub, .colour .colour .red .bg-sub {
  background: red;
}

.green .bg-sub, .colour .green .bg-sub, .colour .colour .green .bg-sub {
  background: green;
}

.blue .bg-sub, .colour .blue .bg-sub, .colour .colour .blue .bg-sub {
  background: blue;
}

// more scheme-classes ...

<div class="colour green">
  <div class="x">
    <div class="x">
      <div class="colour red">
        <div class="x">
          <div class="x">
            <div class="colour blue">
              <div class="x">
                <div class="bg-sub"></div> <!-- should be blue -->
              </div>
            </div>
          </div>
        </div>
        <div class="bg-sub"></div> <!-- should be red -->
      </div>
    </div>
  </div>
</div>

当然，如果你更深入地嵌套，你将需要更多选择器，每个额外级别一个，但这不应该是一个太大的问题。

嵌套颜色方案类

2 个答案: