css匹配规则及性能
一、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匹配规则及性能的更多相关文章
- CSS选择器从右向左的匹配规则
CSS选择器从右向左的匹配规则 下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到 ...
- 浏览器+css基础+选择器+权重+匹配规则
浏览器的组成: shell+内核 shell:用户能看得到的界面就叫shell 内核:渲染rendering引擎和js引擎 现在主流拥有自己开发内核的浏览器:opera现在属于360和昆仑万维 CSS ...
- css写作建议和性能优化小结
1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,cs ...
- nginx location模块--匹配规则
Location语法语法:location [=|~|~*|^~] /uri/ { … } = --> 开头表示精确匹配 ^~ --> 开头表示uri以某个常规字符串开头,理解为匹配url ...
- SqlSever中Index Seek的匹配规则(一)
我们知道在SqlServer中,索引对查询语句的优化起着巨大的作用,一般来说在执行计划中出现了Index Seek的步骤,我们就认为索引命中了.但是Index Seek中有两个部分是值得我们注意的,我 ...
- css匹配原理与优化
一. 匹配原理 浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找.比如之前说的 DIV#divBox p span.red{color:red;},浏览器的查找顺序如下:先查找 html 中 ...
- servlet匹配规则和顺序
1. 写法 ①完全匹配:以“/”开头,以字母(非“*”)结束 如:<url-pattern>/test/list.do</url-pattern> ②目录匹配:以“/” ...
- Nginx location 匹配规则详解
语法规则 location [=|~|~*|^~] /uri/ { … } 模式 含义 location = /uri = 表示精确匹配,只有完全匹配上才能生效 location ^~ /uri ^~ ...
- nginx匹配规则说明以及匹配的优先级
location 匹配规则语法规则 location [=|~|~*|^~] /uri/ { … } 模式 含义location = /uri = 表示精确匹配,只有完全匹配上才能生效lo ...
随机推荐
- HDU 5805
题意: 退役狗 NanoApe 滚回去学文化课啦! 在数学课上,NanoApe 心痒痒又玩起了数列.他在纸上随便写了一个长度为 nn 的数列,他又根据心情随便删了一个数,这样他得到了一个新的数列,然后 ...
- c语言实现数组的转置
#include<stdio.h> int main (){ int i,j,m,n; ][],b[][]; printf("请输入行列式的行数:\n"); scanf ...
- apache php 与nginx php 的区别
apache是通过mod_php来解析php nginx是通过php-fpm(fast-cgi)来解析php 1. PHP 解释器是否嵌入 Web 服务器进程内部执行 mod_php 通过嵌入 PHP ...
- 【luoguP1996】【luogu-original】约瑟夫问题
先来看题目: P1996 约瑟夫问题 题目背景 约瑟夫是一个无聊的人!!! 题目描述 n个人(n<=100)围成一圈,从第一个人开始报数,数到m的人出列,再由下一个人重新从1开始报数,数到m的人 ...
- Visual Studio 2015 Tools for Unity安装
https://blogs.msdn.microsoft.com/visualstudio/tag/visual-studio-tools-for-unity/ 下载对应的VS版本 里边可以找到下载地 ...
- Jedis连接redis客户端
1 单点的redis利用jedis客户端连接 如何连接 //1 利用jedis连接对象操作redis @Test public void test01(){ //构造一个具有连接信息的jedis对象 ...
- 菜鸟笔记 -- Chapter 6.2.2 标识符
6.2.2 标识符 Java中使用标识符来作为类.方法.字段的名称,在Java基础中我们已经简单了解过标识符的定义方法和驼峰命名.本节我们来研究一下标识符的长度问题,难道类名.方法名都可以无限长吗? ...
- Unity 游戏框架搭建 (八) 减少加班利器-QLog
为毛要实现这个工具? 在我小时候,每当游戏到了测试阶段,交给QA测试,QA测试了一会儿拿着设备过来说游戏闪退了....当我拿到设备后测了好久Bug也没有复现,排查了好久也没有头绪,就算接了Bugly拿 ...
- 数据恢复顾问(DRA)
(1)DRA介绍 数据恢复顾问(Data Recovery Advise)是一个诊断和修复数据库的工具,DRA能够修复数据文件和(某些环境下)控制文件的损坏,它不提供spfile和logfile的修复 ...
- Flask—03-bootstrap与表单
bootstrap与表单 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端 ...