【译】谨慎使用CSS中的波浪选择器_html/css_WEB-ITnose

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

一个例子

Item 1
Item 2
Item 3
Item 4
.something-important {   color: red;}.something-important ~ li {   font-style: italic;   color: grey;}

效果：

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

所以问题在哪儿呢？

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

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