一、CSS是如何匹配样式的

样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。

二、CSS选择器性能排行(从高到低)

1.id选择器(#myid)
    2.类选择器(.myclassname)
    3.标签选择器(div,h1,p)
    4.相邻选择器(h1+p)
    5.子选择器(ul > li)
    6.后代选择器(li a)
    7.通配符选择器(*)
    8.属性选择器(a[rel="external"])
    9.伪类选择器(a:hover,li:nth-child)

数据来源于Google 资深web开发工程师Steve Souders

三、书写规则注意事项

1.不要在ID选择器使用的同时再使用标签或类选择器了,例如 "div#content" 或者 "#content.text"。

原因:样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。,而在html中ID是唯一的,如果真的是用了 "div#content",浏览器通过ID定位到了具体的元素,然后发现左侧还是标签选择器,那么就会继续匹配,继续查找元素,这样无疑损耗了浏览器的性能,影响了渲染时间。

2.不要在类选择器时用标签选择器,例如div .text

原因:从css的效率来看,类选择器(class)是比标签选择器要好,这样的写法只会增加了查找的难度,如果真的是根据标签来区分样式的话,考虑写不同的class,例如.container .text

3.如果明确dom结构,能使用子选择器就不要使用后代选择器,例如div a

如果你的写法是这样 "div a",而实际上div 跟 a 是父子关系,如果合适更建议是这么用 "div>a",这样效率高一些,但是不是最好的方案,下面这一点的方案会更好一些。

4.使用类选择器替代后代选择器和子选择器

后代选择器在CSS中是最昂贵的选择器,尤其是把它和标签或通配符放在一起! 毫无疑问,我们要想其他的方式来替换这种书写方式,那么可以考虑这样的写法:div对应的为".div-text" a对应的为".div-text-a",从命名上来关联两者,在查看的时候逻辑也会清晰很多。

5.尽量使用继承来避免写重复的样式

#text{

}  

#text>.span:{
font-size:24px;
}
#text>.a{
font-size:24px;
} 

这种写法应改为

#text{
font-size:24px;
}

6.能不使用通配符选择器(*)和属性选择器就尽量不要用

css匹配规则及性能的更多相关文章

  1. CSS选择器从右向左的匹配规则

    CSS选择器从右向左的匹配规则 下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到 ...

  2. 浏览器+css基础+选择器+权重+匹配规则

    浏览器的组成: shell+内核 shell:用户能看得到的界面就叫shell 内核:渲染rendering引擎和js引擎 现在主流拥有自己开发内核的浏览器:opera现在属于360和昆仑万维 CSS ...

  3. css写作建议和性能优化小结

    1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,cs ...

  4. nginx location模块--匹配规则

    Location语法语法:location [=|~|~*|^~] /uri/ { … } = --> 开头表示精确匹配 ^~ --> 开头表示uri以某个常规字符串开头,理解为匹配url ...

  5. SqlSever中Index Seek的匹配规则(一)

    我们知道在SqlServer中,索引对查询语句的优化起着巨大的作用,一般来说在执行计划中出现了Index Seek的步骤,我们就认为索引命中了.但是Index Seek中有两个部分是值得我们注意的,我 ...

  6. css匹配原理与优化

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

  7. servlet匹配规则和顺序

    1.  写法 ①完全匹配:以“/”开头,以字母(非“*”)结束    如:<url-pattern>/test/list.do</url-pattern> ②目录匹配:以“/” ...

  8. Nginx location 匹配规则详解

    语法规则 location [=|~|~*|^~] /uri/ { … } 模式 含义 location = /uri = 表示精确匹配,只有完全匹配上才能生效 location ^~ /uri ^~ ...

  9. nginx匹配规则说明以及匹配的优先级

    location 匹配规则语法规则 location [=|~|~*|^~] /uri/ { … } 模式    含义location = /uri    = 表示精确匹配,只有完全匹配上才能生效lo ...

随机推荐

  1. HDU 5805

    题意: 退役狗 NanoApe 滚回去学文化课啦! 在数学课上,NanoApe 心痒痒又玩起了数列.他在纸上随便写了一个长度为 nn 的数列,他又根据心情随便删了一个数,这样他得到了一个新的数列,然后 ...

  2. c语言实现数组的转置

    #include<stdio.h> int main (){ int i,j,m,n; ][],b[][]; printf("请输入行列式的行数:\n"); scanf ...

  3. apache php 与nginx php 的区别

    apache是通过mod_php来解析php nginx是通过php-fpm(fast-cgi)来解析php 1. PHP 解释器是否嵌入 Web 服务器进程内部执行 mod_php 通过嵌入 PHP ...

  4. 【luoguP1996】【luogu-original】约瑟夫问题

    先来看题目: P1996 约瑟夫问题 题目背景 约瑟夫是一个无聊的人!!! 题目描述 n个人(n<=100)围成一圈,从第一个人开始报数,数到m的人出列,再由下一个人重新从1开始报数,数到m的人 ...

  5. Visual Studio 2015 Tools for Unity安装

    https://blogs.msdn.microsoft.com/visualstudio/tag/visual-studio-tools-for-unity/ 下载对应的VS版本 里边可以找到下载地 ...

  6. Jedis连接redis客户端

    1 单点的redis利用jedis客户端连接 如何连接 //1 利用jedis连接对象操作redis @Test public void test01(){ //构造一个具有连接信息的jedis对象 ...

  7. 菜鸟笔记 -- Chapter 6.2.2 标识符

    6.2.2  标识符 Java中使用标识符来作为类.方法.字段的名称,在Java基础中我们已经简单了解过标识符的定义方法和驼峰命名.本节我们来研究一下标识符的长度问题,难道类名.方法名都可以无限长吗? ...

  8. Unity 游戏框架搭建 (八) 减少加班利器-QLog

    为毛要实现这个工具? 在我小时候,每当游戏到了测试阶段,交给QA测试,QA测试了一会儿拿着设备过来说游戏闪退了....当我拿到设备后测了好久Bug也没有复现,排查了好久也没有头绪,就算接了Bugly拿 ...

  9. 数据恢复顾问(DRA)

    (1)DRA介绍 数据恢复顾问(Data Recovery Advise)是一个诊断和修复数据库的工具,DRA能够修复数据文件和(某些环境下)控制文件的损坏,它不提供spfile和logfile的修复 ...

  10. Flask—03-bootstrap与表单

    bootstrap与表单 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端 ...