文档章节

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

JellyFlower
 JellyFlower
发布于 2015/11/28 10:09
字数 613
阅读 71
收藏 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
63
0
前端初学-关键知识总结01

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

想要变成一个全栈
2016/11/05
9
0
从 Chrome 源码看浏览器如何计算 CSS

作者李银城,授权新前端转载 在《Effective前端6:避免页面卡顿》这篇里面介绍了浏览器渲染页面的过程: 并且《从Chrome源码看浏览器如何构建DOM树》介绍了第一步如何解析Html构建DOM树,这个...

NewFrontendWeekly
06/21
0
0
2018-05-24 CSS选择器和优先级计算

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

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

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

上赶的大老鼠
2013/12/03
181
0

没有更多内容

加载失败,请刷新页面

加载更多

Experts say the weaker pound is drawing investors to the UK tech sector

UK tech companies secured a record £5.5bn in foreign investment in the first seven months of this year, research shows. This was more than the amount invested per capita in th......

wowloop
28分钟前
5
0
Add support for Android 9-patch images in BorderImage

The 9-patch image implementation in Qt Quick Controls 1 is an internal implementation detail of the Android style. It cannot handle .9.png image files out of the box, but takes ......

shzwork
33分钟前
4
0
c/c++日期时间处理函数小结

日期时间处理函数: 日期时间转为字符串 strftime/std::put_time 字符串解析成日期时间 strptime/std::get_time 时间结构转换:time_t->tm localtime:time_t->tm 时间结构转换:tm->time_t ...

chuqq
37分钟前
5
0
Apache Flink 进阶入门(二):Time 深度解析

前言 Flink 的 API 大体上可以划分为三个层次:处于最底层的 ProcessFunction、中间一层的 DataStream API 和最上层的 SQL/Table API,这三层中的每一层都非常依赖于时间属性。时间属性是流处...

大涛学长
38分钟前
4
0
创龙基于Xilinx Artix-7系列FPGA处理器

SOM-TLA7是一款由广州创龙基于Xilinx Artix-7系列FPGA自主研发的核心板,可配套广州创龙Artix-7开发板使用。核心板尺寸仅70mm*50mm,采用沉金无铅工艺的10层板设计,专业的PCB Layout保证信号...

Tronlong创龙
44分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部