css – 通用选择器,如何排除某些元素

在构建博客后,最后一部分是制作一个通用选择器,当鼠标悬停在它上面时,会突出显示黄色元素.但是我们需要从该行为中排除body和html等元素.
我启动这个

*:hover { background-color:yellow }

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

如果要排除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类,因为background-color已添加到父元素.

您可以考虑使用直接子组合器,>在某种程度上防止这种情况.

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

当然,这假设您只希望将背景颜色应用于body元素中的直接子元素.

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