javascript - 如何在不影响其他同名类的情况下覆盖一个css类

Question

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

带有 class=container 的选定行是我要编辑的小部件。

非常感谢

Answer 1

您可以通过多种方式来解决这个问题。第一，您可以为要添加/不同样式的 HTML 标记创建一个 id，并创建一个 #<id_name>在你的 css 中处理该样式或在 container 前面添加另一个类名为你想要的风格。或者您可以对第 n 个子项使用 CSS 特异性呈现此附加样式。

方法 1)

HTML

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

CSS

#other_css {
  // css stuff
}

方法二

HTML

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

CSS

.other_css {
  ...
}

.container {
  ....
}

方法三

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