CSS(十)-- 结构性伪类选择器

 

十、结构性伪类选择器(:root,:target,:empty,:not

每一个 CSS 伪类及伪元素的出现,肯定都是为了解决某些先前难以解决的问题而应运而生的。

学习了解它们,是解决许多其他复杂 CSS 问题或者前沿技术的基础。

这里是 4 个基本的结构性伪类选择器,结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。

 

:root 伪类

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

语法样式

:root { 样式属性 }

譬如,:root{background:#000} ,即可将页面背景色设置为黑色。

由于属于 CSS3 新增的伪类,所以也可以作为一种 HACK 元素,只对 IE9+ 生效。

介绍 :root 伪类,是因为在介绍使用 CSS变量 的时候,声明全局CSS变量时 :root 很有用。

 

:empty 伪类

:empty 伪类,代表没有子元素的元素。 这里说的子元素,只计算元素结点及文本(包括空格),注释、运行指令不考虑在内。

考虑一个例子:

div{
  height:20px;
  background:#ffcc00;
}
div:empty{
  display:none;
}
<div>1</div>
<div> </div>
<div></div>

上述的例子,前两个div会正常显示,而第三个则会 display:none 隐藏。

也就是说,要想 :empty 生效,标签中连哪怕一个空格都不允许存在。

[Demo戳我::empty结构性伪类示例]