【译】谨慎使用CSS中的波浪选择器

2024-06-16 10:11:00

最近我的一些项目都遇到了一些类似的样式问题。它们都错误地使用了波浪选择器，并造成了很多地方的CSS代码臃肿( CSS Bloat )。大家可能以前也都遇到或者使用过波浪选择器，毕竟它作为CSS选择器已经很长时间了，甚至IE7都支持。波浪选择器用来选择所有匹配到的兄弟元素。

一个例子

<ul>
<li class="something-important">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
.something-important {color: red;
}
.something-important ~ li {font-style: italic;color: grey;
}

效果：

这里我们的波浪选择器匹配了 .something-important 的所有兄弟元素，item2，3，4。

所以问题在哪儿呢？

它太容易制造出脆弱的代码了。

我的经验里，使用波浪选择器一般都是通过type而不是class来选择兄弟元素的。这样会造成你不知道这个选择器写这儿到底是干嘛用的。上面这个例子我们就不知道 .something-important ~li 选择到的<li>标签是个啥，不如直接给这些li标签加上 .not-important 来的简单直接。

通常来说多敲几个字给每个元素都加上class可以给未来的维护减少很多不必要的麻烦。

“在写代码的时候，永远假设最后一个维护你的代码是一个知道你家住在哪儿的沉默的精神病人。写点人读得懂的代码。—— John Woods ”

用武之地

待编辑

避免CSS代码臃肿

我认为这篇文章并不仅仅就是告诉大家避免使用波浪选择器，更多的是让大家知道遇到CSS的问题时不要从加上更多的CSS的代码开始。这从来都不是保持代码可维护性的方法。

【译】谨慎使用CSS中的波浪选择器相关推荐

CSS中的id选择器和class选择器简单介绍
<!-- CSS中选择器 CSS有两种选择器id和class,总之如果说你想在HTML元素中设置CSS属性, 你要在元素中设置id和class选择器.那么我们现在来一个一个的介绍这两中选择器 i ...
在CSS中实现父选择器效果
为何CSS不支持父选择器? 这个问题的答案和"为何CSS相邻兄弟选择器只支持后面的元素,而不支持前面的兄弟元素?"是一样的. 浏览器解析HTML文档,是从前往后,由外及里的.所以, ...
css中的五大选择器
众所周知,在css中存在五大选择器,它们分别是id选择器.标签选择器.后代选择器.类选择器.子选择器,他们具有各自不同的功能,让我们来了解一下. 一.id选择器 id选择器多种标签都能够使用指定样式 ...
css unchecked,详细介绍CSS中的伪选择器
说到伪选择器,真的让我体会到了CSS的无比强大,强大到自己貌似都不认识CSS了,有点C# 6.0中一些语法糖带给我们的震撼...首先我们可以在VS里面提前预览一下. 可以看到,上面的伪类有很多很多, ...
实操代码带你理解CSS中的常用选择器（你值得掌握！）
在CSS中,我们要给一个元素定义样式,首先得把这个元素选出来,我在网上看了很多文章,再结合老师所讲的精华部分将平时比较常用的选择器整理出来分享给大家,哈哈哈一起学习一起进步! https://blog ...
css中的各种选择器
我们都知道浏览器会把远端的html解析成dom模型,这时html文件就变成了xml格式,这样浏览器才能根据css各种规则的选择器在dom结构中找到相应的位置,从而做一些操作.除了常用的标签选择器,类 ...
css中“~”（波浪号）、“，”（逗号）、 “ + ”（加号）和 “ ＞ ”（大于号）是什么意思？
1.群组选择器(',') 2.后代选择器(空格) 3.子元素选择器('>') 4.相邻兄弟选择器('+') 5.兄弟选择器('~') "~"的定义和用法 p~ul选择器 p之 ...
css中“~”（波浪号）、“，”（逗号）、 “ + ”（加号）和 “ ”（大于号）是什么意思？
为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景: p~ul{background:#ff0000;}<p>快乐生活</p><ul><li&g ...
html中hover的写法,在行内css中书写伪选择器:hover
我们知道直接写style可以把css属性直接作用到一个元素上,但是如果这个元素有:hover怎么办呢?还是只能写style吗?查看CSS的标准,你会发现这么一段描述: Setting properti ...

最新文章

热门文章