了解CSS的查找匹配原理 让CSS更简洁、高效

开发 前端
用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?

看1个简单的CSS:

DIV#divBox p span.red{color:red;},按习惯我们对这个CSS 的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再查找所有span元素,当发现有span的class为red的时候,就应用该style。多么简单易懂的原理,可是这个理解却是完完全全相反、错误的。

匹配原理:

浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;},浏览器的查找顺序如下:

先查找html中所有class='red'的span元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是否有id为divBox的div元素,如果都存在则匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:

  1. <style>  
  2.   DIV#divBox p span.red{color:red;}  
  3. <style>  
  4. <body>  
  5.   <div id="divBox">  
  6.     <p><span>s1</span></p>  
  7.     <p><span>s2</span></p>  
  8.     <p><span>s3</span></p>  
  9.     <p><span class='red'>s4</span></p>  
  10.   </div>  
  11. </body> 

如果按从左到右查找,哪会先查找到很多不相关的p和span元素。而如果按从右到左的方式进行查找,则首先就查找到的元素。firefox称这种查找方式为key selector(关键字查询),所谓的关键字就是样式规则中***(最右边)的规则,上面的key就是span.red。

简洁、高效的CSS:

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误(也是我以前常常犯的错误,还老以为这样写才是高效的):

1.不要在ID选择器前使用标签名

一般写法:DIV#divBox

更好写法:#divBox

解释: 因为ID选择器是唯一的,加上div反而增加不必要的匹配。

2.不要再class选择器前使用标签名

一般写法:span.red

更好写法:.red

解释: 同***条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:

p.red{color:red;}

span.red{color:#ff00ff}

如果是这样定义的就不要去掉,去掉后就会混淆,不过建议***不要这样写

3.尽量少使用层级关系

一般写法:#divBox p .red{color:red;}

更好写法:.red{..}

4.使用class代替层级关系

一般写法:#divBox ul li a{display:block;}

更好写法:.block{display:block;}

系列专题:高性能WEB开发应用指南

【编辑推荐】

  1. 高性能WEB开发之Web性能测试工具推荐
  2. 强烈推荐40个优秀的免费CSS工具
  3. 高性能WEB开发之JS、CSS的合并压缩
  4. 10 个漂亮的CSS 3表单制作教程
  5. 2011年2月8款免费HTML和CSS模板推荐
责任编辑:陈贻新 来源: BearRui的博客
相关推荐

2011-05-12 10:48:49

CSS清理浮动

2010-09-10 15:23:54

CSS匹配CSS

2020-07-24 15:40:51

CSS前端代码

2010-08-31 13:06:45

CSS

2023-03-20 16:18:08

JavascriptCSS前端

2023-11-16 08:55:14

CSS前端

2016-01-13 11:39:52

CSS边框网站

2010-09-06 09:06:22

CSS

2017-10-29 06:50:30

前端开发CSSWeb

2010-08-31 13:32:12

CSS

2011-12-02 10:19:24

CSS

2019-07-31 10:24:16

JavaScript浏览器口袋妖怪

2013-03-11 10:30:56

CSSWeb

2012-04-10 10:49:45

WEBCSS

2023-10-29 12:54:16

Doris数据仓库

2023-11-06 09:24:14

CSS相对颜色

2021-12-22 10:18:00

建木九州云DevOps

2022-05-10 10:28:21

JavaScript代码

2010-09-16 15:32:20

CSS选择器

2011-06-03 15:21:51

CSS
点赞
收藏

51CTO技术栈公众号