CSS选择器的性能优化

CSS选择器的性能排名(从最快者开始):

(1)识别器:#id

(2)类:.class

(3)标签:div

(4)相邻兄弟选择器:a + i

(5)父类选择器:ul> li

(6)通用选择器:*

(7)属性选择:input[type="text"]

(8)伪类和伪元素:a:hover

应该记住,浏览器在处理选择器时依照 从右到左的原则,因此最右端的选择器应该是最快的

div * {...} // bad

.list li {...} // bad

.list-item {...} // good

#list .list-item {...} // good

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2015-06-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏pangguoming

html5调用手机陀螺仪实现方向辨识

我们可以让document监听deviceorientation 来获取相关的数据,里面包括3个值 alpha、beta和gamma。

2781
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

1703
来自专栏IMWeb前端团队

css设计中的不变与可变

"人活一世,有人成了面子,有人成了里子,都是时势使然。”——《一代宗师》 如果重构分里子与面子的话,那么html应该是负责里子的,而css就是负责面子了。在上篇...

2306
来自专栏河湾欢儿的专栏

流式布局解决方案

在真实项目中设计师给我们一般是:640960 6401136 750*1334 响应式布局的解决方案: 1>流式布局法 容器或者是盒子一般都不写...

1042
来自专栏菩提树下的杨过

水平/垂直都居中的div

用css样式使div水平/垂直居中,兼容于目前各种主流浏览器 思路: 用绝对定位将div左顶点,定位于浏览器正中心,然后再利用负的margin,将div...

2449
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 padding 篇

对于block元素 1.没宽度设置的情况:垂直向外扩张,水平向内挤压 上下padding会增加元素占据的尺寸(即看上去高度在增加),左右因为元素宽度...

1213
来自专栏田超学前端

微信小程序 购物车代码

在判断加减数量的时候,minusStatus 这个属性是被我写在了产品的外面,所以,没做减到1的的时候,减号改变颜色,需要的可以把minusStatus 这个属...

2293
来自专栏GIS讲堂

"GIS讲堂"第八课—结合UDIG实现图层样式的定制

在本节课程中,分别讲述了三种类型的点的样式,包括:简单点样式、组合点样式、图标点样式。

1304
来自专栏别先生

jQuery的简单入门练习

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery的练习</title> ...

2477
来自专栏前端小叙

css如何实现一个元素高度固定宽度按比例显示?

用padding-top百分比可以实现宽度固定高度按比例展示,现在的需求是对一个video视频的盒子div高度是固定的,宽度如何按比例展示?

1691

扫码关注云+社区

领取腾讯云代金券