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

  1. 首页
  2. 首页>动态>技术经验
  • 发布日期 : 2019-04-06 浏览次数 : 177 分享文章到:

 

 

 

先引入一个例子:

DIV#divBox p span.red{color:red;}

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

 

浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找的。根据之前的例子,浏览器的工作原理如下:

 

1.先查找html中所有class='red'的span元素

2.找到后,再查找其父辈元素中是否有p元素

3.再判断p的父元素中是否有id为divBox的div元素,如果都存在则匹配上。 

 

 


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


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

一般写法:DIV#divBox 

更好写法:#divBox 

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

 

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

一般写法:span.red 

更好写法:.red 

解释: 同第一条,也可以参考第四条

 

3.尽量少使用层级关系 

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

更好写法:.red{ color:red;} 

 

4.使用class代替层级关系 

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

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

 

转载请注明出处:昆明网站建设-昆明做网站 昆明蓝色代码工作室!




Copyright © 2010-2017 lmlmlm.com(昆明蓝色代码工作室)版权所有 All Rights Services. 滇ICP备10200092号