Heim > Web-Frontend > HTML-Tutorial > css书写原则_html/css_WEB-ITnose

css书写原则_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:33:43
Original
1053 Leute haben es durchsucht

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选择符左边不用加任何其他选择符

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

     让规则越具体越好

     避免使用后代选择符

     避免使用标签做子选择符

     依靠继承

     仔细检查子选择符的用途

     

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage