Question

我的网站上确实有很多panel。他们每个人都有一个items-container类的div，并且在其中有几个item div（所有内容都可以在下面的示例代码中看到）。为了给所有样式设置样式，我创建了在所有面板上都可以使用的“全局”样式（我们称其为 global ），但是我希望有几种样式可以使用不同的样式。要更改top-container面板的样式，我需要复制所有全局样式，并在新选择器（top-container）下覆盖其中的每个样式。

除了单独覆盖每个面板之外，还有其他方法可以更改top-container面板的样式吗？

也欢迎使用JS解决方案（如果有的话...）。

这是一个演示：LINK

这是代码：

<div class="top-container">
  <div class="top panel">
    <div class="items-container">
      <div class="item">Item1</div>
      <div class="item">Item2</div>
      <div class="item">Item3</div>
      <div class="item">Item4</div>
    </div>
  </div>
</div>

<div class="middle">
  <div class="left panel">
    <div class="items-container">
      <div class="item">Item1</div>
      <div class="item">Item2</div>
      <div class="item">Item3</div>
      <div class="item">Item4</div>
      <div class="item">Item5</div>
      <div class="item">Item6</div>
      <div class="item">Item7</div>
      <div class="item">Item8</div>
    </div>
  </div>

  <div class="right panel">
    <div class="items-container">
      <div class="item">Item1</div>
      <div class="item">Item2</div>
      <div class="item">Item3</div>
      <div class="item">Item4</div>
      <div class="item">Item5</div>
      <div class="item">Item6</div>
      <div class="item">Item7</div>
      <div class="item">Item8</div>
    </div>
  </div>
</div>

CSS：

.top-container {
  width: calc(100% - 4px);
  height: 50px;
}

.panel {
  border: 2px solid black;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.middle {
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.items-container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.item {
  font-weight: bold;
}

.top-container .items-container {
  display: block;
}

.top-container .items-container .item {
  display: inline-block;
}

我用SASS编写样式，但即使更改语言，jsfiddle也无法正常工作。

这是一个简单的示例。我知道更改两行代码（在这种情况下）并不需要太多的工作，但是我的实际项目要复杂得多，并且覆盖样式=成百上千的额外代码行...

Answer 1

正如您提到的！

要更改顶部容器面板的样式，我需要复制所有全局样式，并在新选择器下覆盖其中的每一个（顶部容器）。

最简单的方法是创建一个已经.panel做过的全局类。现在，如果您想给任何面板提供不同的样式，请添加新的类<div class="top panel panel1">或通过子选择器.middle > .left选择或通过nth-Child()选择。

这是您用我的示例更新的Fiddle。

希望它会回答您的问题。

除了覆盖每种样式之外，还有其他方法可以改变样式吗？

1 个答案: