css样式优先级最高,CSS样式的优先级

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，所以最终应用后者样式。

相关问答

Q1: 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()：其伪类在计算选择器数量时当做普通选择器进行计数。

Q2: 哪种css样式定义的方式拥有最高的优先级

行内最后引用的css文件css文件里面最后的.css，就是说关系离着最近的，优先级最高。这是在排除js跟hover的情况下。

Q3: CSS内部样式和外部样式哪个优先级高?

内部样式优先级高。

CSS与HTML文档结合的4中方法:

1 使用link元素链接到外部的样式文件；

2 在head元素中使用"style"元素来指定；

3 使用CSS "@import"标记来导入样式表单；

4 在body内部的元素中使用"style"属性来定义样式。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

Q4: css的三种样式中哪种样式的优先级最高

一：内嵌式

在HTML文档头部定义多个style元素，实现多个样式表，作用于当前页面。

二：外部引用式

①直接在HTML文档头部引入css样式文件，作用于引入当前文件的所有页面。

三：内联式

使用当前元素的style属性进行样式设置，只作用于当前元素。

内联式内嵌式外部引用式

Q5: css优先级高低排列

选择器优先级：

通常我们可以将CSS的优先级由高到低分为六组：

1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。IE 6不支持这个属性；

2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。

3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。

4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}

5、第五级由一个或多个 类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。

最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。

另外，可以用一句极为简单的话来描述CSS优先级问题：当一个CSS选择器拥有更多的高级别属性时，它的优先级就会比较高。如 #i100

*.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{}

，这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个，当然前者优先级会比较高。相同级别的优先级：

当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：

1、位于head/标签里的style/中所定义的CSS拥有最高级的优先权。

2、第二级的优先属性由位于 style/标签中的 @import 引入样式表所定义。

3、第三级的优先属性由link/标签所引入的样式表定义。

4、第四级的优先属性由link/标签所引入的样式表内的 @import 导入样式表定义。

5、第五级优先的样式由用户设定。

最低级的优先权由浏览器默认。