css样式的优先级别分析,CSS样式的优先级

CSS选择器、优先级以及!important知识总结

关于CSS选择器，首先请看这里： CSS 选择器参考手册

创新互联建站-专业网站定制、快速模板网站建设、高性价比浦东网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式浦东网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖浦东地区。费用合理售后完善，十余年实体公司更值得信赖。

通过以上，我们可以将CSS选择器分为以下几种：

script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"/script

示例：

说明：以下E表示元素，attr表示属性，val表示属性的值。

说明：以下E表示元素

示例：

示例：

示例：

示例：

E:not(s) ,匹配不符合当前选择器的任何元素

示例：

E:target ,匹配文档中特定"id"点击后的效果

示例：

这里我们简单讨论下后代元素选择器和子元素选择器的区别

示例

CSS优先级是指CSS样式在浏览器中被解析的 先后顺序 。

多重样式（Mutiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是多重样式的使用情况。

一般情况下，（ 外部 样式）External style sheet （ 内部 样式）Internal style sheet （ 内联 样式）Inline style

例外 ：如果外部样式放在内部样式的后面，则外部样式将会覆盖内部样式。

示例：

给不同的选择器分配不同的权值

解释：

示例

结果：标签内的数据显示为蓝色。

比较样式的优先级是，只需统计不同选择器的个数，然后与对应的权值相乘即可。根据结果便可得出优先级。

看到这里，有些同学是不是对!important有点迷惑呀 为什么有了它，就优先级最高呐 下面我们再来详细讲一讲!important~

!important 是CSS1就定义的语法，作用是提高指定样式的应用优先权。

语法格式： {cssRule !important} ，即写在定义的最后面，例如： box { color: red !important}

声明了 !important 的样式，具有最高的优先级，相当于写在最下面（最后定义）

IE 6.0 不完全 支持!important

IE支持重定义中的!important，例如：

你将会发现定义了样式 class="yuanxin" 时，在IE下，字体显示为红色（#e00）。

但不支持同一定义中的 !important 。例如：

此时在IE6下不支持，你将会发现定义了样式 class="yuanxin" 时，字体显示为黑色（#000）。

解释 ：

important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为!important优先级较高，否则当含!important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为!important较低!

再举一个例子：

因为IE 6.0一直都不完全支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。

完。

总结内容参考以下：

w3school_CSS 选择器参考手册

阮一峰_CSS选择器笔记

css选择器优先级深入理解

CSS 的优先级机制[总结]

十分感谢你们的分享 n(*≧▽≦*)n

注：原文章首发于： CSS选择器、优先级以及!important知识总结 ，现迁移至此。

script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"/script

css的优先级顺序是怎样的

当创建的样式表越来越复杂时，一个标签的样式将会受到越来越多的影响，这种影响可能来自周围的标签，也可能来自其自身。下面我们从这两方面去看看 CSS 样式的优先级。

CSS 的继承性

CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构：

div

p/p/div

如果 div 有个属性 color: red，则这个属性将被 p 继承，即 p 也拥有属性 color: red。

由上可见，当网页比较复杂， HTML 结构嵌套较深时，一个标签的样式将深受其祖先标签样式的影响。影响的规则是：

CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。

例1：

!-- 类名为 son 的 div 的 color 为 blue --div style="color: red"

div style="color: blue"

div class="son"/div

/div/div

如果我们把一个标签从祖先那里继承来的而自身没有的属性叫做"祖先样式"，那么"直接样式"就是一个标签直接拥有的属性。又有如下规则：

CSS 优先规则2："直接样式"比"祖先样式"优先级高。

例2：

!-- 类名为 son 的 div 的 color 为 blue --div style="color: red"

div class="son" style="color: blue"/div/div

选择器的优先级

上面讨论了一个标签从祖先继承来的属性，现在讨论标签自有的属性。在讨论 CSS 优先级之前，先说说 CSS 7 种基础的选择器：

ID 选择器， 如 #id{}

类选择器， 如 .class{}

属性选择器， 如 a[href="segmentfault.com"]{}

伪类选择器， 如 :hover{}

伪元素选择器， 如 ::before{}

标签选择器， 如 span{}

通配选择器， 如 *{}

CSS 优先规则3：优先级关系：内联样式 ID 选择器 类选择器 = 属性选择器 = 伪类选择器 标签选择器 = 伪元素选择器

例3：

// HTMLdiv class="content-class" id="content-id" style="color: black"/div// CSS#content-id {

color: red;}.content-class {

color: blue;}div {

color: grey;}

最终的 color 为 black，因为内联样式比其他选择器的优先级高。

所有 CSS 的选择符由上述 7 种基础的选择器或者组合而成，组合的方式有 3 种：

后代选择符： .father .child{}

子选择符： .father .child{}

相邻选择符: .bro1 + .bro2{}

当一个标签同时被多个选择符选中，我们便需要确定这些选择符的优先级。我们有如下规则：

CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

例4：

// HTMLdiv id="con-id"

span class="con-span"/span/div// CSS#con-id span {

color: red;}div .con-span {

color: blue;}

由规则 4 可见，span 的 color 为 red。

如果外部样式表和内部样式表中的样式发生冲突会出现什么情况呢？这与样式表在 HTML 文件中所处的位置有关。样式被应用的位置越在下面则优先级越高，其实这仍然可以用规则 4 来解释。

例5：

// HTMLlink rel="stylesheet" type="text/css" href="style-link.css"style type="text/css"@import url(style-import.css); div {

background: blue;}/stylediv/div// style-link.cssdiv {

background: lime;}// style-import.cssdiv {

background: grey;}

从顺序上看，内部样式在最下面，被最晚引用，所以 div 的背景色为 blue。

上面代码中，@import 语句必须出现在内部样式之前，否则文件引入无效。当然不推荐使用 @import 的方式引用外部样式文件，原因见另一篇博客：CSS 引入方式。

CSS 还提供了一种可以完全忽略以上规则的方法，当你一定、必须确保某一个特定的属性要显示时，可以使用这个技术。

CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。

例6：

// HTMLdiv class="father"

p class="son"/p/div// CSSp {

background: red !important;}.father .son {

background: blue;}

虽然 .father .son 拥有更高的权值，但选择器 p 中的 background 属性被插入了 !important， 所以 p 的 background 为 red。

错误的说法

在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100， 你可以理解为 99.99，所以最终应用后者样式。

Css中样式的优先级

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲， !important 与优先级无关，但它与最终的结果直接相关。使用 !important 是一个 坏习惯 ，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

一些经验法则：

什么的情况下可以使用 !important：

A) 覆盖内联样式

你的网站上有一个设定了全站样式的 CSS 文件，同时你（或是你同事）写了一些很差的内联样式。

全局的CSS文件会在全局范围内设置网站的外观，而直接在各个元素上定义的内联样式可能会覆盖您的全局CSS文件。 内联样式和!important都被认为是非常不好的做法，但是有时你可以在CSS文件里用!important去覆盖内联样式。

在这种情况下，你就可以在你全局的 CSS 文件中写一些 !important 的样式来覆盖掉那些直接写在元素上的行内样式。

CSS 优先级

继承得到的样式的优先级是最低的；最近的祖先样式比其他祖先样式优先级高；"直接样式"比"祖先样式"优先级高。

1、无继承性的属性

①  display：规定元素应该生成的框的类型

②  文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

③  盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、 border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

④  背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

⑤  定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

⑥  生成内容属性：content、counter-reset、counter-increment

⑦  轮廓样式属性：outline-style、outline-width、outline-color、outline

⑧  页面样式属性：size、page-break-before、page-break-after

⑨  声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

2、有继承性的属性

①  字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写 字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

② 文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色 a元素除外

③  元素可见性：visibility

④  表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

⑤  列表布局属性：list-style-type、list-style-image、list-style-position、list-style

⑥  生成内容属性：quotes

⑦  光标属性：cursor

⑧  页面样式属性：page、page-break-inside、windows、orphans

⑨  声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、 pitch、pitch-range、stress、richness、、azimuth、elevation

3、所有元素可以继承的属性

①  元素可见性：visibility

②  光标属性：cursor

4、内联元素可以继承的属性

①  字体系列属性

②   除text-indent、text-align之外的文本系列属性

5、块级元素可以继承的属性

 text-indent、text-align

CSS 7 种基础的选择器：

ID 选择器， 如 #id{}

类选择器， 如 .class{}

属性选择器， 如 a[href="segmentfault.com"]{}

伪类选择器， 如 :hover{}

伪元素选择器， 如 ::before{}

标签选择器， 如 span{}

通配选择器， 如 *{}

优先级关系 ：内联样式 ID 选择器 类选择器 = 属性选择器 = 伪类选择器 标签选择器 = 伪元素选择器

属性后插有 !important 的属性拥有最高优先级

:is()和:not()：其伪类在计算选择器数量时当做普通选择器进行计数。

css样式引入有哪几种方式,优先级是怎么样的？

按优先级：前端优先读取正序。正规规范优先倒序。

style= 这样肯定是最优的，但也是最不推荐的。前端标签直接写入。

延伸阅读：读取优先，灵活使用，如大量页面，每页面都要设置。工作繁琐，大量写入增加代码量。不利优化。

style type="text/css" 这样属于第二读取方式。直接写在对应的页面。

延伸阅读：每页面都要设置。工作繁琐，大量写入增加代码量。不利优化。

link type="text/css" href=" 引用CSS文件 第三级。这全局引入.

延伸阅读：全局CSS。可以分离代码及外部引入，简单快捷。也是现在都在用的。

css优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是重点。

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

•浏览器缺省设置

•外部样式表

•内部样式表（位于 head 标签内部）

•内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：head 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。这只是一个大方面的优先级，在前面文章中我们讲过CSS有很多选择器，那么对于同种样式的CSS，各个选择器的优先级又是如何呢？

我们将某一个CSS看成一个三位数，通过比较数字的大小来获取优先级的高低，那么就会相当简单。在这里可以通过下面的规则来定义各个选择器对应的数字。

•百位数是该选择器上的id的数量的总和；

•十位数是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；

•个位数是计算元素(就像table、p、div、*等等)和伪元素(就像:first-line等)；

•如果两个选择器对应的数字相等，也就是具有同样的优先级，在样式表中后面的那个起作用。

•标有"!important"的规则具有最高优先级，例如H1{color:black !importan; font-family:sans-serif}，前景色被标为important，这个前景色具有很高的优先级。但是这种声明容易引起混乱，因此通常使用得较少。

选择器 数值

h1 {color:blue;} 1

p em {color:purple;} 1 + 1 = 2

.apple {color:red;} 10

p.bright {color:yellow;} 1 + 10 = 11

p.bright em.dark {color:brown;} 1 + 10 + 1 + 10 = 22

#id316 {color:yellow} 100

一般我们还可以通过浏览器的插件来查看，到底哪个CSS起作用，比如Firebug(Firefox)、Developer Tools(IE8)等。上面我们介绍到当优先级相同时，哪个CSS起作用取决于所处的位置，通常后面的CSS优先级要高。但是对于IE浏览器，具有相同数值的动态CSS取决于添加的顺序前后，而不是添加的位置前后；后添加的优先级要高。