谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

时间 2019-11-19

标签谈谈一些有趣 css 题目结构性选择器栏目 CSS 繁體版

原文原文链接

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不只为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。css

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

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

谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法github

谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型布局

谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少post

谈谈一些有趣的CSS题目（四）-- 从倒影提及，谈谈 CSS 继承 inherit学习

谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略url

谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题spa

谈谈一些有趣的CSS题目（七）-- 消失的边界线问题code

谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

全部题目汇总在个人 Github 。

10、结构性伪类选择器（`: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结构性伪类示例]

`:not` 伪类

CSS否认伪类，:not(X)，能够选择除某个元素以外的全部元素。

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

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

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

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

使用 :not(*) 将匹配任何非元素的元素，所以这个规则将永远不会被应用。
这个选择器只会应用在一个元素上，你不能用它在排除全部祖先元素。举例来讲， body :not(table) a 将依旧会应用在table内部的<a> 上, 由于 <tr>将会被:not() 这部分选择器匹配。（摘自MDN）

`:target` 伪类

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

:target 表明一个特殊的元素，如果谈论区别的话，它须要一个id去匹配文档URI的片断标识符。

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

全部题目汇总在个人 Github ，发到博客但愿获得更多的交流。

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

谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

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

:root 伪类

语法样式

:empty 伪类

:not 伪类

:target 伪类

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

`:root` 伪类

`:empty` 伪类

`:not` 伪类

`:target` 伪类