文档章节

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

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

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

想要变成一个全栈
2016/11/05
4
0
深入CSS,让网页开发少点“坑”

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

葡萄城控件技术团队
2015/12/03
56
0
2018-05-24 CSS选择器和优先级计算

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

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

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

冰袋雪条火筒木冬瓜
2014/03/03
0
0
转------详解CSS选择器、优先级与匹配原理

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

aiaiaiya
2015/08/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Generator-ES6

基本概念 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。 Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装...

简心
15分钟前
2
0
FullCalendar日历插件说明文档

普通显示设置 属性 描述 默认值 header 设置日历头部信息。 如果设置为false,则不显示头部信息。包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置: title: 显示当...

ada_young
16分钟前
0
0
Redis知识总结--string的内部实现

SDS(Simple Dynamic String) String的数据结构是一个字节数组,但简单的获取数组长度的时间复杂度就是O(n),这对于单线程的redis来讲是不能接受的,因此string在redis中的实现是SDS类,SDS类...

looqy
26分钟前
1
0
SpringBoot开发案例之整合Dubbo分布式服务

前言 在 SpringBoot 很火热的时候,阿里巴巴的分布式框架 Dubbo 不知是处于什么考虑,在停更N年之后终于进行维护了。在之前的微服务中,使用的是当当维护的版本 Dubbox,整合方式也是使用的 ...

Java干货分享
32分钟前
1
0
美团团购订单系统优化记

团购订单系统简介 美团团购订单系统主要作用是支撑美团的团购业务,为上亿美团用户购买、消费提供服务保障。2015年初时,日订单量约400万~500万,同年七夕订单量达到800万。 目标 作为线上S...

Skqing
36分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部