在构建博客后,最后一部分是制作一个通用选择器,当鼠标悬停在它上面时,会突出显示黄色元素.但是我们需要从该行为中排除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()伪类来否定它们.
例如,您可以.excluded向元素添加类.
html body *:not(.excluded):hover { background-color: yellow }
但这会有问题,因为通用选择器将应用于所有元素,包括嵌套在.excluded元素中的元素.
如果元素中存在任何嵌套元素body,那么background-color即使它们.excluded仅包含该类而仅仅因为background-color添加到父元素,它们也会无意中显示为应用于子元素.
您可以考虑使用直接子组合器,>以在一定程度上防止这种情况.
html body > *:not(.excluded):hover { background-color: yellow }
当然,这假设您只希望background-color应用于body元素中的直接子元素.
总之,您应该尽可能避免使用通用选择器.