在构建博客之后,最后一部分是制作一个通用选择器,当将鼠标悬停在它上面时,它会以黄色突出显示元素。但是我们需要从该行为中排除诸如 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
也会无意中显示为应用于子元素。排除background-color
被添加到父元素。
您可以考虑使用直接子组合器 >
来在一定程度上防止这种情况。
html body > *:not(.excluded):hover { background-color: yellow }
当然,这假设您只希望将 background-color
应用于 body
元素中的直接子元素。
总而言之,您应该尽可能避免使用通用选择器。
关于css - 通用选择器,如何排除某些元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28653356/