CSS选择器性能差异

(1)选择器是从右到左进行规则匹配。

(2)选择器的执行效率从高到低排序:

ID选择器;         class选择器;       标签选择器;

相邻选择器 +;      子选择器 >;          后代选择器;

通配符选择器 *;     属性选择器 [];      伪类选择器 :;

(3)选择器性能的提升方法:

1)避免使用通配符选择器;

2)避免使用标签或class选择器限制ID选择器;

3)避免使用标签限制class选择器;

4)避免使用多层标签选择器。用class选择器代替,减少css查找;

5)避免使用子选择器;

6)使用继承;

时间: 2024-11-05 17:26:06

CSS选择器性能差异的相关文章

CSS选择器 - 性能的探究及提升

[本博客为原创:http://www.cnblogs.com/HeavenBin/]  前言: 在工作中编写CSS样式表时随着选择器层数的增加总会看到选择器又丑又长的情况,利用工作之余研究从其命名再到如何提高其性能.本博客将以"通俗易懂"."简洁""的方式来探究CSS选择器的性能,以及叙述总结如何提升CSS选择器的性能.(2017-8-20) 一. CSS选择器性能是如何消耗的? 工作原理:浏览器利用CSS选择器来匹配文档元素. 工作流程:例如 #hd .

前端性能优化:CSS 选择器性能

CSS选择器效率: CSS选择器具有高效的继承性,引用Steve Souders的话, CSS选择器效率从高到低的排序如下: ID选择器 比如#header 类选择器 比如.promo 元素选择器 比如 div 兄弟选择器 比如 h2 + p 子选择器 比如 li > ul 后代选择器 比如 ul a 7. 通用选择器 比如 * 属性选择器 比如 type = "text" 伪类/伪元素选择器 比如 a:hover 组合选择器 你可以有一个标准的选择器比如 #nav,来选择任何带

编写高效的css选择器

css选择器的匹配规则是从右向左.和常规思维不同. css选择器限制个数最好不超过4层. Google 资深web开发工程师 Steve Souders 对 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.

CSS选择器效率问题

今天学习了CSS各类选择器,对其效率问题有些疑问,故总结了一些学习笔记 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.这很容易被忘记,尤其是当你意识到你会的太少,CSS代码效率很低的时候. 下面的规则只真正被应用到那些速度要求很高,有成百上千的DOM元素被绘制在页面上的大型网站.但是,实践出真理,这和你是在创建下一个Facebook,还是写一个本地的展示页面都没有关系,多知道一点总是好的. CSS选择器: 对我们大多数人来说,CSS选择器并不陌生.最基

这 30 类 CSS 选择器,你必须理解!

CSS 选择器是一种模式,用于选择需要添加样式的元素.平时使用最多也是最简单的就是 #id..class 和标签选择器,在 CSS 中还有很多更加强大更加灵活的选择方式,尤其是在 CSS3 中,增加了很多新的选择器,使得选择元素更加便捷,所以必须理解这些选择器,只有先理解了,多用几次,自然而然就记住了. 1.* [CSS2] 通配符,选择页面所有元素. 1 *{ 2 margin:0; 3 padding:0; 4 } 上面代码的作用是把页面上所有元素的内外边距设置为 0,这是最基本的清除默认 

HTML教程-CSS选择器-李南江

配套视频下载地址 CSS选择器 标签选择器 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 格式: 标签名称{   属性:值; } 注意点: 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 标签选择器无论标签藏得多深都能选中 id选择器 什么是id选择器? 作用: 根据指定的id名称找到对应的标签, 然后设置属性 格式: #id名称{   属性:值; } 注意点: 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可

jQuery原理系列-css选择器实现

jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.

CSS的性能优化

---恢复内容开始--- 作者:徐尤熙链接:https://www.zhihu.com/question/19886806/answer/80432295 [CSS代码重构与优化之路] 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多.CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置,你不知道修改这行代码会有什么影响,所以如果有修改或增加新功能时,开发人员往往不敢去删除旧的冗余代码,而保险地增加

CSS选择器及其优先级

一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="MyCss.css" type="text/css" rel="stylesheet"> </head> &l