13518219792
当创建的样式表越来越复杂时，一个标签的样式将会受到越来越多的影响，这种影响可能来自周围的标签，也可能来自其自身。下面我们从这两方面去看看 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，所以最终应用后者样式。
1. ！important
在属性后面写上这条样式，会覆盖掉页面上任何位置定义的元素的样式。
2. 行内样式，在style属性里面写的样式。
3. id选择器
4. class选择器
5. 标签选择器
6. 通配符选择器*
7. 浏览器的自定义属性和继承
css选择器依照以上顺序排列优先级
当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲， !important 与优先级无关，但它与最终的结果直接相关。使用 !important 是一个 坏习惯 ，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
一些经验法则：
什么的情况下可以使用 !important：
A) 覆盖内联样式
你的网站上有一个设定了全站样式的 CSS 文件，同时你（或是你同事）写了一些很差的内联样式。
全局的CSS文件会在全局范围内设置网站的外观，而直接在各个元素上定义的内联样式可能会覆盖您的全局CSS文件。 内联样式和!important都被认为是非常不好的做法，但是有时你可以在CSS文件里用!important去覆盖内联样式。
在这种情况下，你就可以在你全局的 CSS 文件中写一些 !important 的样式来覆盖掉那些直接写在元素上的行内样式。
梳理这部分是因为在使用组件模式开发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书写，这样可以保证内部自定义样式不会受到外部干扰，减少不必要的麻烦。
链接：
可设置的属性（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
font 简写属性在一个声明中设置所有字体属性。
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
注意： line - height属性设置行与行之间的空间。
例子：
p.ex1{
font:15px arial,sans-serif;
}
p.ex2{
font:italic bold 12px/30px Georgia,serif;
}
扩展资料：
1、font-style：指定文本的字体样式。
属性值：
normal：默认值。浏览器显示一个标准的字体样式。
italic：浏览器会显示一个斜体的字体样式。
oblique：浏览器会显示一个倾斜的字体样式。
inherit：规定应该从父元素继承字体样式。
2、font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-variant 属性主要用于定义小型大写字母文本。
属性值：
normal：默认值。浏览器会显示一个标准的字体。
small-caps：浏览器会显示小型大写字母的字体。
inherit：规定应该从父元素继承 font-variant 属性的值。
3、font-weight：属性设置文本的粗细。
属性值：
normal：默认值。定义标准的字符。
bold：定义粗体字符。
bolder：定义更粗的字符。
lighter：定义更细的字符。
100-900的整百数：定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit：规定应该从父元素继承字体的粗细。
4、font-size：属性用于设置字体大小。
5、font - family：属性指定一个元素的字体。
