GVKun编程网logo

CSS选择器优先级总结（css选择器及优先级）

8

在本文中，我们将给您介绍关于CSS选择器优先级总结的详细内容，并且为您解答css选择器及优先级的相关问题，此外，我们还将为您提供关于CSS>选择器优先级与效率优化、CSS属性选择器高级用法及选择器优先

在本文中，我们将给您介绍关于CSS选择器优先级总结的详细内容，并且为您解答css选择器及优先级的相关问题，此外，我们还将为您提供关于CSS > 选择器优先级与效率优化、CSS 属性选择器高级用法及选择器优先级问题、CSS 渲染样式优先级（选择器优先级）、CSS 选择器优先级的知识。

本文目录一览：

CSS选择器优先级总结（css选择器及优先级）

CSS选择器优先级总结（css选择器及优先级）

一、问题引出

　　一段代码

@H_301_9@<h1 class = "blue" id = "title">article</h1>

　　在CSS中使用不同的选择器对文字的颜色进行设置。

@H_301_9@h1{ color:red; } .blue{ color:blue; } #title{ color:yellow; }

　　最终的字体颜色是黄色，当然也可以尝试把3种设置顺序颠倒查看效果。

二、问题答案

　　元素采用了某种排序机制，在这一机制种，id选择器优于类选择器，而类选择器又优于标签选择器，因此最后字体显示为黄色。这一类机制就称为优先级机制。

三、总结

　　常见选择器的优先级排序（低到高）

　　1.通用选择器。如*{...}

　　2.标签选择器。如h1{...}

　　3.类选择器。如.blue{...}

　　4.伪类选择器。如a:hover{...}、li:first-child{...}

　　5.ID选择器。如#title{...}

CSS > 选择器优先级与效率优化

CSS > 选择器优先级与效率优化

CSS选择器优先级与效率优化

Date: 7th of Aug, 2015

Author: HaoyCn

本文收集网上各处关于CSS选择器的文章总结，并自己归纳一篇。

各类选择器的优先级

  1. important声明 1,0,0,0
  2. ID选择器 0,1,0,0
  3. 类选择器 0,0,1,0
  4. 伪类选择器 0,0,1,0
  5. 属性选择器 0,0,1,0
  6. 标签选择器 0,0,0,1
  7. 伪元素选择器 0,0,0,1
  8. 通配符选择器 0,0,0,0

在上面的选择器中，此外，经测试

属性选择器 = 伪类选择器(应用最后一个)

:last-child{color:red;}
[desc]{color:green;}

伪类选择器 > 相邻选择器

:last-child{color:green;}
p ~ p{color:blue;}

相邻选择器 = 子选择器 = 后代选择器(应用最后一个)

p~p{color:red;}
body p{color:blue;}
body > p{color:green;}

后代选择器 > 标签选择器

p ~ p{color:blue;}
p{color:green;}

样式位置的影响

  1. <style></style> 同 <link /> 同级，应用取决于<style>标签和<link /> 标签的先后顺序

  2. 元素属性的优先级高于以上两种样式

  3. !important 优先级高于以上两种样式

备注

!important 在IE6中的BUG：在同一组CSS属性中, !important不起作用。如：

#selector{color:blue !important;color:green;}

选择器效率

读取选择器的原则是从右到左。因此，我们书写的右边的最后一个选择器，被称作关键选择器，对于效率有决定性影响。

以下效率排行由 @Steve Souders 提供。

  1. ID选择器
  2. 类选择器
  3. 标签选择器
  4. 相邻选择器
  5. 子选择器
  6. 后代选择器
  7. 通配符选择器
  8. 属性选择器
  9. 伪类选择器

优先级高的不一定效率高

举个例子：#id .class 与 div#id p.class

前者效率高于后者，而后者优先级高于前者。我们需要在效率与优先级之间平衡取舍。

优化建议

以下网址提供了诸多建议：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficie...

扼要摘其精要总结如下：

  1. 避免使用通配符

  2. 不使用标签名或类名修饰ID规则：如果规则使用ID选择器作为关键选择器，不要给规则添加标签名。因为ID本身就是唯一的，添加标签名会不必要地降低匹配效率。

  3. 不使用标签名修饰类：相较于标签，类更具独特性。

  4. 尽量选择最具体的方式：造成低效的最简单粗暴的原因就是在标签上使用太多规则。给元素添加类可以更快细分到类方式，可以减少规则去匹配标签的时间。

  5. 关于后代选择器和子选择器：避免使用后代选择器，非要用的话建议用子选择器代替，但子选择器也要慎用，标签规则永远不要包含子选择器。

  6. 利用可继承性：没必要在一般内容上声明样式。

CSS 属性选择器高级用法及选择器优先级问题

CSS 属性选择器高级用法及选择器优先级问题

CSS 选择器之属性选择器

1：[attr] 存在此属性即可
2：[attr = ''attr_value''] 属性值为给定值即可
3：[attr ^= ''attr_value''] attr 属性键以 container 开头 即便是字符串匹配
<style type="text/css">
    div[data-type ^= ''container''] {
        background-color : #000;
    }
</style>
<div data-type="container master">
    开头存在 container 匹配成功
</div>

<div data-type="containernosensestr">
    开头存在 container 匹配成功
</div>

<div data-type="master container">
    不在开头 匹配失败
</div>
4：[attr *= ''attr_value''] attr 属性键中存在给定的值即可 即便是字符串匹配
<style type="text/css">
    div[data-type *= ''container''] {
        background-color : #00f;
    }
</style>
<div data-type="nosensestrcontainernosensestr">
    只要键值中有给定的值即可匹配成功
</div>
5：[attr $= ''attr_value''] attr 属性键结尾匹配 即便是字符串匹配
<style type="text/css">
    div[data-type $= ''container''] {
        background-color : #0ff;
    }
</style>
<div data-type="container master">
    结尾不存在 失败
</div>

<div data-type="nosensestrcontainer">
    结尾存在 成功
</div>

<div data-type="master container">
    结尾存在 成功
</div>
6：[attr ~= ''attr_value''] attr 属性键值以空格分隔 其中存在给定的值即可匹配成功
<style type="text/css">
    div[data-type ~= ''container''] {
        background-color : #f00;
    }
</style>
<div data-type="container master">
    空格拆分 存在container 匹配成功
</div>

<div data-type="containernosensestr">
    不存在 失败
</div>

<div data-type="master container">
    空格拆分 存在container 匹配成功
</div>
7：[attr |= ''attr_value''] attr 属性键值以 "-" 分隔 且拆分得到的第一个值为给给定属性值 匹配成功
<style type="text/css">
    div[data-type |= ''container''] {
        background-color : #f0f;
    }
</style>

<div data-type="container-master">
    -拆分 第一个值为container 匹配成功
</div>

<div data-type="containernosensestr">
    不存在 失败
</div>

<div data-type="master-container">
    -拆分 第一个值不是container 匹配失败
</div>

CSS 选择器之优先级

ID 选择器 100 类选择器 10 元素选择器 1

大家都知道 内联  >  内部  > 外部 而且样式内外样式表会因定义或引入的先后顺序后者覆盖前者

但样式选择器的优先级并不会因定义的先后顺序而发生覆盖

#container .article p {
    background-color:#000;
    font-size:14px;/* 无效 后面的 important 会优先于一切选择器的定义*/
}
//并不能覆盖前者 优先级低于前者
.article p {
    background-color:#fff;
    font-size:14px;/* 无效 后面的 important 会优先于一切选择器的定义*/
}
//同上
p {
    background-color:#ccc;
    font-size:16px!important;/*important 会优先于一切选择器的定义*/
}

但以上都会被指定为 important 属性覆盖掉


CSS 渲染样式优先级（选择器优先级）

CSS 渲染样式优先级（选择器优先级）

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 */
           /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */


附：浏览器默认样式表

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

CSS 选择器优先级

CSS 选择器优先级

CSS（Cascading Style Sheets) 层叠样式表

浏览器遵循三个步骤： 来源、优先级、源码顺序，分析没有元素的每一个属性。如果一个声明在层叠中胜出，它就被称为一个层叠值。每个元素最多有一个层叠值。

  • CSS解决样式冲突判断条件 样式表来源 => 选择器优先级 => 源码顺序

样式表来源

  • 用户样式表
  • 用户代理样式表（浏览器样式）
  • 第三方样式（少数浏览器支持）

选择器优先级

  • !import > id > 类 > 标签
  • 伪类选择器和属性选择器优先级和类选择器一样。
  • 可以采用2,1,3的计算方式，分别代表id，类，标签选择器的数量。前面数量越大优先级越高。
  • .name .person(0,2,0) 优先级大于 div .person p (0,1,0)

源码顺序

  • 出现较晚的优先级高。

    // 链接样式顺序 LoVeHAte原则
a:link {}
a:visited{}
a:hover {}
a:active {}

我们今天的关于CSS选择器优先级总结和css选择器及优先级的分享就到这里，谢谢您的阅读，如果想了解更多关于CSS > 选择器优先级与效率优化、CSS 属性选择器高级用法及选择器优先级问题、CSS 渲染样式优先级（选择器优先级）、CSS 选择器优先级的相关信息，可以在本站进行搜索。

本文标签：

上一篇26.纯 CSS创作按钮被从纸上掀起的立体效果（css按钮怎么做）

下一篇美化博客CSS（美化博客footer标签）

相关文章