> 웹 프론트엔드 > HTML 튜토리얼 > css书写原则_html/css_WEB-ITnose

css书写原则_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:33:43
원래의
1053명이 탐색했습니다.

1.css选择符

css选择符的编写方式决定了浏览器必须执行的匹配次数,而某些类型的css选择符将会导致浏览器尝试更多匹配,因此开销比简单选择符更高。

ID选择符

这种类型的选择符简单且高效,用于匹配页面唯一的元素。#id {}

类选择符.className {}

类型选择符tagName {}

相邻兄弟选择符H1 + #toc {}

子选择符#toc > li {}

后代选择符#toc A {}

通配选择符 * {}

属性选择符 [href="#index"] {}

伪类和伪元素  A:hover {}

高效css选择符的关键

1)最右边优先

     事实上,css选择符是从右到左进行匹配的。

2)编写高效的css选择符

     避免使用通配规则:仅使用ID、类选择符

     不要限定ID选择符:ID选择符左边不用加任何其他选择符

     不要限定类选择符:不要用具体的标签来限定类选择符,而是根据实际情况对类名进行拓展。

     让规则越具体越好

     避免使用后代选择符

     避免使用标签做子选择符

     依靠继承

     仔细检查子选择符的用途

     

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