有趣的CSS题目（10）：结构性伪类选择器

（点击上方公众号，可快速关注）

作者：伯乐在线专栏作者 - chokcoco

如需转载，发送「转载」二字查看说明

开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

不断更新，不断更新，不断更新，重要的事情说三遍。

所有题目汇总在我的 Github （https://github.com/chokcoco/iCSS/issues/1）。

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

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

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

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

:root 伪类

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

语法样式

譬如，: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结构性伪类示例（http://codepen.io/Chokcoco/pen/VmvWpG）]

:not 伪类

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

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

关于 :not 伪类有几个有趣的现象：

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

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

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

• 这个选择器只会应用在一个元素上， 你不能用它在排除所有祖先元素。 举例来说， body :not(table) a 将依旧会应用在table内部的 上, 因为 将会被:not() 这部分选择器匹配。（摘自MDN）

:target 伪类

:target 伪类，在 #8、纯CSS的导航栏Tab切换方案 中已经实践过了，可以回过头看看。

:target 代表一个特殊的元素，若是谈论区别的话，它需要一个id去匹配文档URI的片段标识符。

:target 选择器的出现，让 CSS 也能够接受到用户的点击事件，并进行反馈。（另一个可以接收点击事件的 CSS 选择器是 :checked）。

所有题目汇总在我的 Github（https://github.com/chokcoco/iCSS/issues/1） ，发到博客希望得到更多的交流。

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

专栏作者简介 （ 点击 → 加入专栏作者 ）

---

chokcoco：经不住流年似水，逃不过此间少年。

打赏支持作者写出更多好文章，谢谢！

关注「前端大全」

看更多精选前端技术文章

↓↓↓