CSS选择器效率从高到低的排序如下：

  1. ID选择器 比如#header
  2. 类选择器 比如.promo
  3. 元素选择器 比如 div
  4. 兄弟选择器 比如 h2 + p
  5. 子选择器 比如 li > ul
  6. 后代选择器 比如 ul a 7. 通用选择器 比如 *
  7. 属性选择器 比如 type = “text”
  8. 伪类/伪元素选择器 比如 a:hover

CSS选择器效率的更多相关文章

  1. CSS选择器效率问题

    今天学习了CSS各类选择器,对其效率问题有些疑问,故总结了一些学习笔记 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.这很容易被忘记,尤其是当你意识到你会的 ...

  2. CSS选择器性能分析

    写了几篇关于js的博客,也是关于性能的,现在,我觉得有必要那css来认真分析一下了.之前只是看别人这么写就跟着写,但是没有去研究这样写或者是不是正确的写法,性价比怎么样,渲染的效率好么!这些都没有考虑 ...

  3. 优化css选择器

    1.css选择器效率排行从高到低如下: id选择器(#head) 类选择器(.content) 标签选择器(p,h1) 相邻选择器(h1+p) 子选择器(ul < li)

  4. 编写高效的 CSS 选择器

    高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...

  5. 看这一篇就够了,css选择器知识汇总

    对大多技术人员来说都比较熟悉CSS选择器,举一例子来说,假设给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了, ...

  6. [转] 编写高效的 CSS 选择器

    高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...

  7. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

  8. 关于CSS选择器的效率问题

    最近一段时间接触CSS比较多,所以从网上找了写资料,这里做下总结. 以下是CSS选择器的效率排名: id选择器(#myid) 类选择器(.myclassname) 标签选择器(div,h1,p) 相邻 ...

  9. CSS选择器渲染效率

    1 浏览器如何识别你的选择器 首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应的样式附于对应的HTML元素,达到美化页面的效果.Chris Coyier曾在<Efficiently ...

随机推荐

  1. 魔豆love移植

    其中love.sh代码如下: #!/bin/sh if [ ! -f "$app_conf" ]; then echo url=http://modou.ydjiao.com/ap ...

  2. XE5开发Android程序调用电话相关功能(短信息和电话)

    方法a.不使用Intent而是直接发短信. smsManager对应的Delphi代码应该是: uses Androidapi.JNI.JavaTypes,Androidapi.JNI.Telepho ...

  3. Hiero的spreadsheet中添加tag属性列

    Hiero在对剪辑线上的item进行管理的时候,往往会添加能多tag,而在管 理面板spreadsheet中却无法对tag进行查询,这是一件很麻烦的事,Hiero Development Guide中 ...

  4. 《JavaScript设计模式与开发》笔记 1.面向对象的JavaScript

    多态 封装 原型模式 基于原型模式的继承javascript对象 1.多态 多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果.换句话说,给不同的对象发哦少年宫同一个消 ...

  5. 黄聪：Jquery+DataTables插件，如何在ajax调用服务器数据后，自动给tr添加id属性

    http://legacy.datatables.net/usage/callbacks#fnRowCallback 主要通过 fnCreatedRow 事件来实现 var table = $('#t ...

  6. vue 导出excel 多个sheet

    npm install -save xlsx //下载依赖包 import Vue from 'vue'; import XLSX from 'xlsx'; /** * 导出数据报表xlsx文件 * ...

  7. Ubuntu 14.10 下编译Hadoop2.4.0

    在http://www.aboutyun.com/thread-8130-1-1.html 这里看到到,安装过程遇到了上面说的问题,所以将此文转载过来,以备不时之需,感谢此作者. 问题导读: 1.如果 ...

  8. 滚动效果marquee的用户体验不好，很少被用到，一般用jquery替代

    滚动效果marquee的用户体验不好,很少被用到,一般用jquery替代

  9. 学习笔记之GenFu

    Everybody was GenFu Fighting - GenFu http://genfu.io/ GenFu is a test and prototype data generation ...

  10. 数据仓库与ODS

    1. 引言 本篇主要讲述操作数据存储(ODS)系统产生的背景.定义.特点,以及它与数据仓库的区别.在前两篇,笔者介绍了什么是数据仓库?为什么需要数据仓库?数据仓库系统的体系结构是什么?因此可能在读者心 ...