CSS层叠样式表优先法则

CSS样式优先级的收集、整理

 

CSS 优先级法则：

  1.  选择器都有一个权值，权值越大越优先；
  2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
  3. 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式（用户样式表）；若用户样式表设置了!important”规则，则优先级为最高级(高过内联样式)（个人添加）
  4. 继承的CSS 样式优先级低于后来指定的CSS 样式；
  5. 在同一组属性设置中标有“!important”规则的优先级最大。

多重样式优先级：

如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：

（内联样式）Inline style >（内部样式）Internal style sheet >（外部样式）External style sheet 

       有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

样式的层级关系：

 权重：

权值的大小跟选择器的类型和数量有关

样式的优先级跟样式的定义顺序有关

标签选择器的权值永远都比一个类选器择器的权值低，无论有多少个————比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承

  • 通配选择符的权值 0,0,0,0
  • 标签的权值为 0,0,0,1
  • 伪对象选择的权值为 0,0,0,1
  • 伪类选择的权值为 0,0,1,0
  • 类的权值为 0,0,1,0
  • 属性选择的权值为 0,0,1,0
  • ID的权值为 0,1,0,0
  • 内联样式的权值为1,0,0,0
  • important的权值为最高 1,0,0,0,0

权值使用规则：

选择器的权值加到一起，大的优先；如果权值相同，后定义的优先。同类选择器无加权

选择器权重值的计算：

A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以 B、C、D 的值都为 0，即 A=1, B=0, C=0, D=0（简写为 1,0,0,0，下同）。

B：计算该选择器中ID的数量。（例如，#header 这样的选择器，计算为 0, 1, 0, 0）。

**C：计算该选择器中伪类及其它属性的数量（包括类选择器、属性选择器等，不包括伪元素）。 **（例如， .logo[id='site-logo'] 这样的选择器，计算为 0, 0, 2, 0）。

D：计算该选择器中伪元素及标签的数量。（例如，p:first-letter 这样的选择器，计算为0, 0, 0, 2）。

计算权重值时，A,B,C,D四组值，从左到右，分组比较。如果A相同，比较B，如果B相同，比较C，如果C相同，比较D，如果D相同，后定义的优先。

共用样式和私用样式：

比如说两个ul，它们的子元素除了背景色之外都一样，那可以直接用li {}来定义相同的公用样式，用 .ul_1 li {} ， .ul_2 li {} 来定义不相同的样式。可以根据元素之间的差别来选择用哪种方法。推荐用多层级的方式书写css选择器。

选择器优先级

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承

同类选择符条件下层级越多的优先级越高。

优先级就近原则，同权重情况下样式定义最近者为准。

载入样式以最后载入的定位为准。

样式冲突

CSS中的样式覆盖原则：

        规则一：由于继承而发生样式冲突时，最近祖先获胜（最近原则）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
body {color: black;}
p {color: red;}
</style>
</head>
<body>
<p>CSS层叠样式表<strong>优先级</strong></p>
</body>

　　strong分别从body和p中继承了color属性，但是由于p在继承树上离strong更近，因此strong中的文字最终继承p的蓝色。

规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜（最直接原则）。

　　在上面的例子中，假如还指定了strong元素的样式，如：　strong {color:red;}

　　那么根据规则二，strong中的文字最终显示为红色。

规则三：直接指定的样式发生冲突时，样式权值高者获胜。

规则四：样式权值相同时，后者获胜。

　　注意外部样式表引入的顺序（及<link>元素的顺序），以及外部样式表与内部样式表的出现位置。一般来说，内部样式表出现在所有外部样式表的引入之后，一般是在</head>之前。

规则五：!important的样式属性不被覆盖

!important 例外规则

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

一些经验法则：

  • 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important
  • 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
  • 永远不要在你的插件中使用 !important
  • 永远不要在全站范围的 CSS 代码中使用 !important

建议：

  • 更好地利用 CSS 级联属性
  • 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。
  • 当无其他要指定的内容时，可复制简单的选择器以增加特异

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

　　 A）覆盖内联样式

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

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

许多JavaScript框架和库都添加了内联样式。 有时候可以用!important与优先级高的选择器一起使用，以重写覆盖这些内联样式。

B）覆盖优先级高的选择器

怎样覆盖 !important

  1. 添加一条 带 !important 的CSS规则，再给这个给选择器更高的优先级（添加一个标签，ID或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则比胜）。
  2. 或者使用相同的选择器，但是置于已有的样式之后。
  3. 或干脆改写原来的规则，以避免使用 !important。

 

posted @ 2020-08-09 23:40  愿心远行  阅读(529)  评论(0)    收藏  举报