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的权重 标签的权值为 ...
随机推荐
- 从零开始攻略PHP（4）——数组的使用
1.数组的概念 数组就是一个用来存储一系列变量值的命名区域. 每个数组元素有一个相关的索引(也成为关键字),它可以用来访问元素. PHP允许间隔性地使用数字或字符串作为数组的索引. 2.数字索引数组 ...
- Lintcode: Expression Evaluation (Basic Calculator III)
Given an expression string array, return the final result of this expression Have you met this quest ...
- Mac配置环境变量（Java，Android，Gradle，Maven，Hosts）
JAVA_HOME 配置环境变量 # 使用vim打开.bash_profile文件,加入java环境变量 $ vim .bash_profile export JAVA_HOME=$(/usr/lib ...
- paper 30 ：libsvm的参数说明
English: libsvm_options: -s svm_type : set type of SVM (default 0) 0 -- C-SVC 1 -- nu-SVC 2 -- one-c ...
- haskell笔记2
模式匹配 # haskell_test.hs length' :: [a] -> a length' [] = 0 length' (_:x) = 1 + length' x as模式 xs@x ...
- sdf
SDF(Standard Delay Format)是一种存储timing data的文件,其中的数据是tool-independent的 可以包括: 1)Delay: module path, de ...
- PAT乙级 1019. 数字黑洞 (20)
1019. 数字黑洞 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 给定任一个各位数字不完全相同的4位 ...
- 【py分析】使用SGMLParser分析淘宝html
SGMLParser Python 默认自带 HTMLParser 以及 SGMLParser 等等解析器,前者实在是太难用了,我就用 SGMLParser 写了一个示例程序: import urll ...
- 【linux】暂时解决sis m672(神舟F4000 D9) linux驱动 宽屏分辨率的问题?
1. 首先安装包 sudo apt-get install gcc make binutils git xorg-dev mesa-common-dev libdrm-dev libtool buil ...
- 前端框架与UI搭配
如果是 Angular 那就选 Ionic (一对好 CP)如果是 Vue 那就选 Vux (基于 WeUI)如果是 jQuery 那就选 Framework7 (iOS 和 Android 双皮肤) ...