CSS3在选择器方面添加伪类选择器这方面的特性，比如:nth-child(n)、:nth-of-type(n)这样的选择器，其好处在这里就不多说了。如果你对这方面感兴趣的话，你可以阅读早前整理有关于CSS选择器方面的《CSS3 选择器:伪类选择器》一文。而今天我们要说的是在Sass中如何更灵巧的使用CSS3的一些伪类选择器。

最近有一个项目需求，希望一个简单的列表在一个网格中完美显示，比如只有一个单元格的时候，列表占据整个容器宽度，但总是不太好控制。因此，有时当你忙着一件事情时，问你有没有办法可以实现，我试图使用可以想到的办法，总是会有空白出现，我就会心烦意乱的说，实现不了。

表单一直以来对于CSSer来说都是一件不易的事情，很难用CSS处理好表单要样式。但是有一些很少使用的选择器，却赋予我们不一样的能力，可以让我们很好的控制input元素和其周边元素的样式，而且是根据功能来调整不同的样式，这些往往都是通过JavaScript辅助完成的。而这些选择器中有一些是较新的，而另一些是老的选择器，只不过没有过多的被重视，甚至没什么人使用。以至于这么强大的功能就这样被忽视。

前段时间@Zell Liew的博客深入的介绍了CSS中伪选择器:empty和:blank相关的知识。那么:empty和:blank究竟有什么作用，又在什么场景下使用呢？今天我们来一起看看，它们怎么使用，更应该应用在哪个场景之下呢？

属性选择器是很强大很神奇的。很多时候可以帮助你摆脱一些棘手的问题，可以让你避免类名的添加，甚至还可以指出代码中的一些问题。属性选择器是复杂而又强大的，但不用担心，因为它也是易于学习和使用的。在本文中，将会学习到CSS属性选择器的强大功能以及如何在实际工作中运用它。并提供了一些关于如何使用属性选择器的一些个人想法。

在开始聊CSS选择器Level 4（Selectors Level 4）之前，先要明确一个简单的概念。时至今日，在CSS的世界之中再不会有大版本的称谓，比如以前大家熟悉的CSS2.1、CSS3。现在的CSS都只会以CSS模块的版本来进行区分，比如我们今天要聊的CSS选择器，其最新版本就是：CSS Selectors Level 4。在CSS Selectors Level 4中为选择器增添了不少的新特性，当然这些新特性有的已得到浏览器的支持，有的只得到部分主流浏览器的支持。所以接下来，花点时间学习一下，以备后用。

早在十多年前，在社区就有很多专业人士探讨和深究过 CSS 选择器对渲染性能的影响。特别是对于今天的现代浏览器而言，他们经过了多年的变化（和优化），浏览器变得更聪明！对于 Web 开发人员，“不应该需要担心优化选择器的问题”，他对页面的渲染性能影响已经非常的小。即使如此，CSS的选择器的使用还是有分高效和非高效的，我们在编码的时候，还是应该尽可能的使用高效的CSS选择器，因为高效的CSS选择器对于页面的渲染是有一定帮助的，哪怕这种帮助很微小。但对于追求极致的渲染体验，这一切都是值得的，因为你要付出的并不会太多，反而得到的会较多。如果对网站的所有领域，包括CSS都进行微小的改进，那么他们将产生更多的实质性变化；用户总是会受益的！

对于 CSSer 而言，CSS 选择器是 CSS 领域最基础不过的知识了，他虽基础，但在给元素设置样式，选择器是不可或缺的。正所谓，“众里寻他千百度，蓦然回首，那人却在灯火阑珊处”！在 Web 开发中，我们需要通过选择器的能力，在众人中找到想找到的人。话又说回来，选择器虽然简单，但它却很重要，就从 W3C 规范中有关于选择器版本的迭代中也能说明这一点（现在已经是 Level 4 版本了）。事实上，早在2018年年底我就在《初探CSS 选择器Level 4》一文中和大家一起探讨了在选择器 Level 4 中新增的选择器。

W3C 的 Selectors Level 4 新增了很多强大的 CSS 选择器。早在 2018 年年底就在《初探CSS 选择器Level 4》一文中和大家一起探讨了这些选择器。在这些新选择器中，最为有意思的是“逻辑组合选择器”，即 “任意匹配伪类选择器:is()、否定（匹配无）伪类选择器:not()、选择器权生调整伪类选择器:where()和关系性（父选择器）伪类选择器:has() 。尤其是关系性伪类选择器:has()，它和 CSS 容器查询在近十多年来一直成为 Web 开发者期待的 CSS 功能之一。在这篇文章中，我将和大家一起来探讨什么是关系性伪类选择器（又称父选择器）以及它是如何工作的，并且将会通过一些示例来阐述该选择器可以在哪里，最重要的是我们现在如何使用它。