通用选择器，如何排除一些元素

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将无意中似乎应用于子元素，即使它们仅包含.excluded类，因为{{1} }}被添加到父元素。

您可以考虑使用直接子组合器background-color来防止这种情况发生。

>

当然，这假设您只希望将html body > *:not(.excluded):hover { background-color: yellow } 应用于background-color元素中的直接子项。

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

Answer 2

您几乎不想在CSS中使用通用选择器。

如果您想要排除html和body元素，则可以像body * {}一样编写选择器。