:root,:empty,:not伪类选择器

2019-05-29114次阅读css3

css3中的:root,:empty,:not伪类选择器小结。

 

:root 伪类

:root 伪类匹配文档树的根元素。应用到HTML,:root即表示为<html>元素,除了优先级更高外,相当于html标签选择器

:root{background:#000}

即可将页面背景色设置为黑色。

由于属于CSS3新增的伪类,所以也可以作为一种 HACK元素,只对 IE9+ 生效。CSS利用filter/opacity实现浏览器兼容的背景透明一文中就所有体现。

为什么大部分CSS自定义属性放在:root中,可以发现声明全局CSS变量时 :root也很有用。


:empty 伪类

:empty 伪类,代表没有子元素的元素。 这里说的子元素,只计算元素结点及文本(包括空格),注释、运行指令不考虑在内。使用场景可以参考被遗忘了的css伪类:empty
 

:not 伪类

CSS否定伪类,:not(X),可以选择除某个元素之外的所有元素。

X不能包含另外一个否定选择器。

:not 伪类不像其它伪类,它不会增加选择器的优先级。它的优先级即为它参数选择器的优先级。

我们知道,选择器是有优先级之分的,通常而言,伪类选择的权重与类选择器(class selectors,例如 .example),属性选择器(attributes selectors,例如 [type="radio"])的权重相同,但是有一个特例,就是 :not()。:not 否定伪类在优先级计算中不会被看作是伪类,但是在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数。

使用 :not(*) 将匹配任何非元素的元素,因此这个规则将永远不会被应用。

使用场景可以参考css中使用:not()选择器为最后一个元素去除边框

上一篇: css多列等高布局  下一篇: css属性值initial、inherit、unset关键字区别  

:root,:empty,:not伪类选择器相关文章