如何排除页脚中具有相同名称的 class？

Question

这是代码示例：

<body>
  <div class="koko">content here</div>
  <footer>
    <div class="koko">content</div>
  </footer>
</body>

现在，如何排除 koko class，但只排除位于 footer 元素中的那个？

我试过这个：

.koko:not(footer.koko)

没用。

我也试过：

.koko:not(footer)

和

.koko:not(.footer.koko)

但没有任何帮助。有什么想法吗？

Answer 1

使用>直接子

.koko {
  background: red
}
footer > .koko {
  background: blue
}

<div class="koko">content here</div>
<footer>
  <div class="koko">content</div>
</footer>

或者您可以使用 :not

.wrap .koko {
  background: red
}
footer div:not(.koko) {
  background: red
}

<div class="wrap">
  <div class="koko">content here</div>
</div>
<footer>
  <div class="koko">content</div>
  <div>this will be red</div>
</footer>

Answer 2

我没有排除页脚 class，而是只在正文中包含了 class，例如：

.lnd > .koko {css}

它奏效了。太棒了

How to exclude class with same name located in the footer?