CSS选择器的优化
![大漠](https://res.fequan.com/upload_file/avatar_image/202404/100131_e26031.jpg)
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 功能之一。在这篇文章中,我将和大家一起来探讨什么是关系性伪类选择器(又称父选择器)以及它是如何工作的,并且将会通过一些示例来阐述该选择器可以在哪里,最重要的是我们现在如何使用它。