如何覆盖 css class 而不影响其他同名的 classes

Question

我有许多小部件组合在一个页面中，但是我需要为某个小部件覆盖 container class，但发生的情况是所有小​​部件都有 class 同名受到影响。下面是检查元素

的屏幕截图

选择的 class=container 行是我要编辑的小部件。

非常感谢

Answer 1

据我了解，您想为具有 class container 的元素之一设置不同的样式。一个好的做法是创建另一个具有特殊样式的 class：container new-class

Answer 2

您可以通过多种方式解决这个问题。第一，你可以为你想要添加的 HTML 标签创建一个 id'l/different 样式，并在你的 css 中创建一个 #<id_name> 来处理该样式或添加另一个类名container 前面的样式。或者您可以使用 CSS 特定于第 n 个子渲染此附加样式。

方法 1)

HTML

<tagname id="other_css" class="container" ...>

CSS

#other_css {
  // css stuff
}

方法二

HTML

<tagname class="container other_css" ...>

CSS

.other_css {
  ...
}

.container {
  ....
}

方法 3

HTML

<wrapper>
  <tagname class="container ...>
  <tagname class="container ...>
  <tagname class="container ...> <- the one you care about 
</wrapper>

CSS

wrapper:nth-child(3) {
  ...
}

资源： - https://www.w3.org/TR/selectors-3/#specificity

Answer 3

只需在 container 旁边添加另一个 class class 和 define/write 您想要的 css 新 class 中的代码。

Answer 4

亲爱的，我认为您想覆盖 bootstrap 的默认 class 名称 container，这是一种糟糕的方法，并且会在您将来制造障碍。

最好在 container 中使用一些带有 class 名称的 div 并做任何你想做的事...

如果您一定不会更新 html，那么请尝试使用 .container:nth-child(5)，其中 (5) 是 class 所在的数字。