> 웹 프론트엔드 > HTML 튜토리얼 > 【译】谨慎使用CSS中的波浪选择器_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:19:17
원래의
1209명이 탐색했습니다.

原文: 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 选择到的

  • 标签是个啥,不如直接给这些li标签加上 .not-important 来的简单直接。

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

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

    用武之地

    待编辑

    避免CSS代码臃肿

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

  • 원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿