文档章节

CSS 渲染样式优先级(选择器优先级)

JellyFlower
 JellyFlower
发布于 2015/11/28 10:09
字数 613
阅读 57
收藏 1

To find the value for an element/property combination, user agents(浏览器) must apply the following sorting order:(浏览器渲染遵循的规则如下:)

    

     1、Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media  rules containing the declaration and on all links on the path through which the style sheet was reached.

        找到所有样式


     2、Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:

    1. user agent declarations(浏览器)

    2. user normal declarations(浏览用户)

    3. author normal declarations(开发人员样式)

    4. author important declarations

    5. user important declarations

           按照样式来源进行优先级排序(升序)


     3、Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.

               按选择器的优先级排序


     4、Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

         以上优先级相同时,后来者居上,但是文档中 style标签中的样式优先级会优先于引入的样式表。




Calculating a selector's specificity

A selector's specificity is calculated as follows:

  • count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)

  • count the number of ID attributes in the selector (= b)

  • count the number of other attributes and pseudo-classes in the selector (= c)

  • count the number of element names and pseudo-elements in the selector (= d)

Some examples:

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */


附:浏览器默认样式表

http://developer.doyoe.com/default-style/ 

© 著作权归作者所有

共有 人打赏支持
JellyFlower
粉丝 11
博文 27
码字总数 17068
作品 0
长春
私信 提问
深入CSS,让网页开发少点“坑”

通常我们在学习CSS的时候,感觉很容易掌握,却常常在实际应用中碰到各式各样难以填补的“坑”,为避免大家受到同样的困惑与不解,本文详细讲解了CSS中优先级和Stacking Context等诸多高级特性...

葡萄城控件技术团队
2015/12/03
56
0
前端初学-关键知识总结01

样式的优先级 样式的优先级按照“就近原则”:行内样式(标签内的style) > 内嵌样式(head中的style) > 链接样式(link) > 导入样式(style标签中@import) 链接样式是浏览网页的时候先将...

想要变成一个全栈
2016/11/05
4
0
2018-05-24 CSS选择器和优先级计算

一、CSS的三大特性? 1.1 继承:子类能够继承父类的某些样式 1.2 优先级:不同选择器定义的样式具有不同的优先级数量 1.3 层叠:当优先级数量相同时,后面定义的样式的覆盖前面定义的样式 二...

瑾瑜爱上猫
2018/05/24
0
0
CSS选择器、优先级与匹配原理

1 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而 在标签内写入style=""的方式,...

上赶的大老鼠
2013/12/03
0
0
转------详解CSS选择器、优先级与匹配原理

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候。这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起...

aiaiaiya
2015/08/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(11.9)hive操作基础知识

上一篇博客分享了hive的简介和初体验,本节博主将继续分享一些hive的操作的基础知识。 DDL操作 (1)创建表 #建表语法CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name ...

em_aaron
今天
2
0
OSChina 周四乱弹 —— 我家猫真会后空翻

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @我没有抓狂 :#今天听这个# 我艇牛逼,百听不厌,太好听辣 分享 Led Zeppelin 的歌曲《Stairway To Heaven》 《Stairway To Heaven》- Led Z...

小小编辑
今天
2
0
node调用dll

先安装python2.7 安装node-gyp cnpm install node-gyp -g 新建一个Electron-vue项目(案例用Electron-vue) vue init simulatedgreg/electron-vue my-project 安装electron-rebuild cnpm ins......

Chason-洪
今天
3
0
scala学习(一)

学习Spark之前需要学习Scala。 参考学习的书籍:快学Scala

柠檬果过
今天
3
0
通俗易懂解释网络工程中的技术,如STP,HSRP等

导读 在面试时,比如被问到HSRP的主备切换时间时多久,STP几个状态的停留时间,自己知道有这些东西,但在工作中不会经常用到,就老是记不住,觉得可能还是自己基础不够牢固,知识掌握不够全面...

问题终结者
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部