css书写原则_html/css_WEB-ITnose
程序员文章站
2022-04-14 11:12:51
...
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选择符左边不用加任何其他选择符
不要限定类选择符:不要用具体的标签来限定类选择符,而是根据实际情况对类名进行拓展。
让规则越具体越好
避免使用后代选择符
避免使用标签做子选择符
依靠继承
仔细检查子选择符的用途
推荐阅读
-
HTML css书写规范的建议
-
HTML连载81-CSS书写格式、一个手机页面的基本结构
-
关于网页路径的疑惑_html/css_WEB-ITnose
-
Codeforces Round #156 (Div. 2)-A. Greg's Workout_html/css_WEB-ITnose
-
html 关于ul标签的_html/css_WEB-ITnose
-
background-size 设置背景图片的大小_html/css_WEB-ITnose
-
multiple backgrounds 多重背景_html/css_WEB-ITnose
-
建站新人_html/css_WEB-ITnose
-
折线图怎么做啊?急求!_html/css_WEB-ITnose
-
Codeforces Round #107 (Div. 2)-A. Soft Drinking_html/css_WEB-ITnose