css - 通用选择器，如何排除某些元素

Question

在构建博客之后，最后一部分是制作一个通用选择器，当将鼠标悬停在它上面时，它会以黄色突出显示元素。但是我们需要从该行为中排除诸如 body 和 html 之类的元素。我从这个开始

*:hover { background-color:yellow } 

如何从通用选择器中排除元素？

Answer 1

如果您想排除根元素，例如 html/body，您可以选择 它们中的所有元素。

在这种情况下，以下任何一种都可以:

html body *:hover { background-color: yellow }

body *:hover { background-color: yellow }

* * *:hover { background-color: yellow }

:root * *:hover { background-color: yellow }

---

要排除其他元素，您可以使用 :not() pseudo-class否定它们。

例如，您可以向元素添加一个 .excluded 类。

html body *:not(.excluded):hover { background-color: yellow }

不过，这会有问题，因为通用选择器将应用于所有 元素，包括嵌套在 .excluded 元素中的元素。

如果 body 元素中有任何嵌套元素，即使它们包含 ，background-color 也会无意中显示为应用于子元素。排除 类仅仅因为 background-color 被添加到父元素。

您可以考虑使用直接子组合器 > 来在一定程度上防止这种情况。

html body > *:not(.excluded):hover { background-color: yellow }

当然，这假设您只希望将 background-color 应用于 body 元素中的直接子元素。

总而言之，您应该尽可能避免使用通用选择器。