CSS选择器及其优先级
一：一些普通的选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="MyCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- 派生选择器实例 -->
<a>这是一个div外部a标签的样式</a>
<div>
<a>这是一个div内部a标签的样式</a>
<h2>css基础语法</h2>
</div> <!--id选择器与派生选择器实例 -->
<a href="https://www.baidu.com/" > 百度不变色</a>
<div id="divid">
<a href="https://www.baidu.com/" >百度变色</a>
</div>
<br /> <!--类选择器-->
<div id="divclass" class="divclss">
div类选择器实例
</div>
<br /> <!--属性选择器-->
<p title="t1"> 属性选择器</p>
<!--和body指定的颜色一样-->
<p title="t2"> 属性选择器</p>
</body>
</html>
h2,a,h1{
color:red;
}
body{
color:yellow;
}
div a{
color: blue;
}
#divid a{
color:darkred;
}
.divclss{
color:chartreuse;
}
[title = t1]
{
color: mediumvioletred;
}
/*这个要按顺序来*/
div a:link {color:blue;}
div a:visited {color:blue;}
div a:hover {color:red;}
div a:active {color:yellow;}
/*id选择器的优先级比类型选择器优先级高*/
效果截图：
aaarticlea/png;base64,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" alt="" />
二：优先级实例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*标签选择器*/
div { color: blue } /*绿色*/
/*类选择器*/
.a1 { color:yellow } /*黄色*/
/*类派生选择器*/
.a1 div {color:purple} /*紫色*/
/*id选择器*/
#id1{ color: cyan} /*青色*/
#id2{ color: cyan} /*青色*/
#id3{ color: cyan} /*青色*/
/*id派生选择器*/
#id2 div{ color: red} /*红色*/ </style>
</head>
<body>
<div id="id1" class="a1"> 我是青色的 id选择器优先级高于类选择器 </div> <div class="a1">
<div class="a1">我是紫色的 类派生选择器优先级高于所有类选择器</div>
<div id="id2">我是青色的 id选择器优先级高于类派生选择器
<div id="id3">
我是红色的而不是青色的 id派生选择器优先级高于id选择器
</div>
</div>
</div>
</body>
</html>
效果图：
aaarticlea/png;base64,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" alt="" />
3：更加专业点的优先级判断
（原博客地址 ： http://www.cnblogs.com/aaronjs/p/3156809.html#_h2_1 ）
计算指定选择器的优先级:重新认识CSS的权重
- 通配选择符的权值 0,0,0,0
- 标签的权值为 0,0,0,1
- 类的权值为 0,0,1,0
- 属性选择的权值为
0,0,1,10,0,1,0 - 伪类选择的权值为 0,0,1,0
- 伪对象选择的权值为 0,0,0,1
- ID的权值为 0,1,0,0
- important的权值为最高 1,0,0,0
使用的规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。虽然很简单，但如果书写的时候没有注意，很容易就会导致CSS的重复定义，代码冗余。
从上面我们可以得出两个关键的因素：
- 权值的大小跟选择器的类型和数量有关
- 样式的优先级跟样式的定义顺序有关
一篇文章 256个class类名选择器干掉一个id选择器实例页面
http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html
给出的答案是:所有的类名(classes)都是以8字节字符串存储的。8字节所能hold的最大值就是255. 当同时出现256个class, 势必会越过其边缘，溢出到id区域。
总结：
比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数 ，至于各级别的优先级，大家应该已经很清楚了，就是：
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承
这也就解释了为什么11个标签的定义会比不上1个类的定义，1个类加11个标签会比不上2个类的权重高。
选择器种类
查阅资料归纳下大概有如下几种：
通配选择器
类型选择器
ID选择器
类选择器
包含选择器
子元素选择器
相邻兄弟选择器
属性选择器
css1-css3提供非常丰富的选择器，但是由于某些选择器被各个浏览器支持的情况不一样，所以很多选择器在实际css开发中很少用到
关于CSS的执行效率：
- 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
- 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。
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.伪类选择器（a:hover,li:nth-child）
上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低、
详细的介绍大家还可以点击Writing efficient CSS selectors。
CSS选择器及其优先级的更多相关文章
- CSS选择器以及优先级与匹配原理
最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...
- CSS选择器、优先级与匹配原理（转）
CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...
- 详解CSS选择器、优先级与匹配原理
原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...
- 转载：详解CSS选择器、优先级与匹配原
转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...
- CSS选择器、优先级和匹配原理
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- 详解CSS选择器、优先级与匹配原理【转】
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- （转）css选择器及其优先级
文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...
- CSS 选择器及优先级
CSS 选择器及优先级 1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同,那么 ...
- CSS选择器、优先级与匹配原理
为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...
随机推荐
- 深入理解JAVA I/O系列六：Linux中的IO模型
IO模型 linux系统IO分为内核准备数据和将数据从内核拷贝到用户空间两个阶段. 这张图大致描述了数据从外部磁盘向运行中程序的内存中移动的过程. 用户空间.内核空间 现在操作系统都是采用虚拟存储器, ...
- PostgreSQL trigger (function) examples
postgres=# \c warehouse_db You are now connected to database "warehouse_db" as user " ...
- TTabControl、TMemo组件（制作一个简单的多文本编辑框）
TTabControl包含一列字符串标签的tabs 每个标签控制一个对象 首先创建一个TForm;接下来添加TTabControl组件和一个文件对话框TOpenDialog(用于添加文件),然后在TT ...
- 查看linux [Fedora] 系统信息
系统版本: $ /etc/issue Fedora release (Heisenbug)或者$ cat /etc/issue 系统位数: $ getconf LONG_BIT64 内核信息: $ c ...
- UISearchController的使用
- (void)addSearchController { _searchController = [[UISearchController alloc] initWithSearchResultsC ...
- ini,config文件的读取修改
修改ini配置文件 // 声明INI文件的写操作函数 WritePrivateProfileString() [System.Runtime.InteropServices.DllImport(&qu ...
- Hashtable和HashMap区别
Hashtable和HashMap区别 相同点: 实现原理,功能相同,可以互用 主要区别: a.hashtable继承Directionary类,HashMap实现Map接口 b.Hashtable线 ...
- 3D语音天气球（源码分享）——通过天气服务动态创建3D球
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 这个项目准备分四部分介绍: 一:创建可旋转的"3D球":3 ...
- mybatis(一)安装
1.创建web项目,添加jar包 2.创建实验表user_t 3.在src下创建conf.xml文件,如下 <?xml version="1.0" encoding=&quo ...
- SQL语句：find_in_set的使用方法
如果我们有一张表: 里面有的信息如下: 我们需要查找出friends字段里面包含11的值. 我们传统的方法是: %"; 但是这样查到的结果2条的,不大符合我们的需求,如下所示: 我们只想查找 ...