css样式默认优先级,css设置样式优先级

css优先级计算规则

梳理这部分是因为在使用组件模式开发h5应用会出现组件样式修改未生效的问题，在解决样式修改的问题前，需要理清楚CSS样式生效的优先级。样式根据引入和声明需要分开介绍，分为 引入样式优先级 和 声明样式优先级 。

引入样式优先级

引入样式优先级一般是在外部样式、内部样式、内联样式之间应用同一个样式的情况是使用， 优先级如下：

外部样式 | 内部样式 内联样式

外部样式 和 内部样式 ，最后出现的优先级最高，例如：

!-- 内联样式 --spanstyle="color:red;"Hello/spanstyletype="text/css"/* 内部样式 */h3{color:green;}/style!-- 外部样式 style.css --linkrel="stylesheet"type="text/css"href="style.css"/

因此，对于一些重置的样式集，比如 normalize.css/reset.css 必须写在所有样式的前面。

PS: 没有外联样式， 参考 。

声明样式优先级

1. 大致的优先级

一般来说满这个规则：

继承不如指定

!important 内联 ID Class|属性|伪类 元素选择器

:link、:visited、:hover、:active按照LVHA（LoVe HAte）顺序定义

上面是优先级算法反映出的大致结果，在一般的开发中熟记即可。如果需要进一步研究原理，则了解下优先级算法。

2. 优先级算法

选择器的特殊性值分为四个等级，如下：

等级标签内选择符ID选择符Class选择符/属性选择符/伪类选择符元素选择符

示例span style="color:red;"#text{color:red;}.text{color:red;} [type="text"]{color:red}span{color:red;}

标记位x,0,0,00,x,0,00,0,x,00,0,0,x

特点:

每个等级的初始值为0，

每个等级的叠加为选择器出 现的次数相加

不可进位，比如0,99,99,99

依次表示为：0,0,0,0

每个等级计数之间没关联

等级判断从左向右，如果某一位数值相同，则判断下一位数值

如果两个优先级相同，则最后出现的优先级高，!important也适用

通配符选择器的特殊性值为：0,0,0,0

继承样式优先级最低 ，通配符样式优先级高于继承样式

计算示例：

a{color: yellow;} /*特殊性值：0,0,0,1*/

div a{color: green;} /*特殊性值：0,0,0,2*/

.demo a{color: black;} /*特殊性值：0,0,1,1*/

.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/

.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/

#demo a{color: orange;} /*特殊性值：0,1,0,1*/

div#demo a{color: red;} /*特殊性值：0,1,0,2*/

生效示例：

ahref=""第一条应该是黄色/a!--适用第1行规则--divclass="demo"inputtype="text"value="第二条应该是蓝色"/!--适用第4、5行规则，第4行优先级高--ahref=""第三条应该是黑色/a!--适用第2、3行规则，第3行优先级高--/divdivid="demo"ahref=""第四条应该是红色/a!--适用第6、7行规则，第7行优先级高--/div

关于伪类LVHA的解释

a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；

当鼠标滑过a链接时，满足:link和:hover两个伪类，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；

当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。

这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

在组件中的应用

目前的前端开发为了增加开发效率，会对常用组件进行封装，此外，组件还会添加一些必要的结构样式。但是业务的设计文稿中可不一定按照预先写好的默认样式，需要在开发业务时根据组件的DOM结构修改默认样式，此时会出现样式不生效的问题。

例如下面的结构，如果对Title直接增加样式类，则肯定不会生效，因为Title的DOM结构为两层(组件样式定义规定不能使用ID选择器，且类选择器满足最小标记原则)），故样式最多为0,0,2,x。因此，样式多层标记就可提高自定义样式的优先级，例如下方的SCSS写法。

Pageclass="test"Headerclass="test__header"NavbarTitleclass="test__header--title"Toolbar/Title/Navbar/HeaderContent/Content/Page

.test{.test__header{.test__header--title{height:100px;}}}

此外，对于Page组件的样式标记策略推荐使用 金字塔形(树形) ，比如上面的SCSS书写，这样可以保证内部自定义样式不会受到外部干扰，减少不必要的麻烦。

链接：

相关问答

Q1: 19、css样式的优先级

1、最近的祖先样式比其他祖先样式优先级高。

2、"直接样式"比"祖先样式"优先级高。

首先，我们需要知道有哪些选择器：

1）ID 选择器， 如 #id{}

2）类选择器， 如 .class{}

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

4）伪类选择器， 如 :hover{}

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

6）标签选择器， 如 span{}

7）通配选择器， 如 *{}

3、内联样式 ID 选择器 类选择器 = 属性选择器 = 伪类选择器 标签选择器 = 伪元素选择器

4、当一个标签同时被多个选择符选中，我们便需要确定这些选择符的优先级。我们有如下规则：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

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

Q2: Css中样式的优先级

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

一些经验法则：

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

A) 覆盖内联样式

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

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

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

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

Q4: css样式优先级

CSS样式优先级：

!important（权重1000+）

内联样式（权重1000）

id（权重100）

class类（权重10）

元素（权重1）

默认样式（权重0）

注意：

（1）继承的权重为0

（2）权重可以相加

div.box 权重为11

div#box 权重为101

（3）相同权重的选择器，后面的会覆盖前面的

Q5: CSS样式优先级及穿透

CSS优先级是根据等级的值相加得出选择器的权重来决定的。

!important 行内样式 ID 类、伪类、属性 标签名 继承 通配符

计算权重方式：

从图上看讲权重分为：

1. 第一等：代表内联样式，如: style=””，权值为1000。

2. 第二等：代表ID选择器，如：#content，权值为0100。

3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。

4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5. 通配符、子选择器、相邻选择器等的。如*、、+,权值为0000。

6. 继承的样式没有权值。

当权重一样时遵循准则：

1. 选择器越 具体 优先级越 高

2. 在同一个级别的情况下， 最后 指定的规则优先级就越 高 ，也就是我们通常说的就近原则；

权重计算例子：

1. li  - 0 0 0 1 权重为 1

2. h1 + *[rel=up] -0 0 1 1 这个相邻选择器由标签选择器与属性选择器组成，属性选择器为10，因此权重为11

3. ul ol li.red - 0 0 1 3 权重为13

4 li.red.level - 0 0 2 1 权重21

1. !important  （width: 100% !important）

2. 行内样式   (style="width:100%")

3. id选择器  (#myIdName)

4. class选择器  (.myClassName)

5. 标签选择器  (div,h1,p)

1. 使用 " " 符号，这种方式主要是用于普通css，方式为：

  外层 第三方组件样式： .wrapper .swiper-pagination { color: #eee  }

2. 使用 "/deep/" ,这种方式主要用于sass或less，方式为：

外层 /deep/ 第三方组件样式： .wrapper /deep/ .swiper-pagination { color: #eee  }