原文： the tilde css selector, use carefully!
最近我的一些项目都遇到了一些类似的样式问题。它们都错误地使用了波浪选择器，并造成了很多地方的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 选择到的
通常来说多敲几个字给每个元素都加上class可以给未来的维护减少很多不必要的麻烦。
“在写代码的时候，永远假设最后一个维护你的代码是一个知道你家住在哪儿的沉默的精神病人。写点人读得懂的代码。—— John Woods ”
待编辑
我认为这篇文章并不仅仅就是告诉大家避免使用波浪选择器，更多的是让大家知道遇到CSS的问题时不要从加上更多的CSS的代码开始。这从来都不是保持代码可维护性的方法。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
793
收藏
