3.CSS优先级-CSS进阶

时间:2022-07-26
本文章向大家介绍3.CSS优先级-CSS进阶,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

三、CSS优先级

层叠,指的是样式的覆盖当样式的覆盖发生冲突时,以优先级高的为准。 当同一个元素同一个样式属性被赋予多个属性值时,我们就需要遵循一定的优先级规则来选择属性值。 样式覆盖发生冲突常见的 5 种情况:

  • 引用方式冲突
  • 继承方式冲突
  • 指定样式冲突
  • 继承样式与指定样式冲突
  • !important

1.引用方式冲突

CSS有 3 种常用的引入方式:

  • 外部样式
  • 内部样式
  • 行内样式

CSS引用方式不同,也会产生冲突。

(1)3种方式的优先级

行内样式 > (内部样式 = 外部样式)

行内样式优先级最高,内部样式 和外部样式优先级相同若内部样式 和 外部样式同时存在,则以最后引入的样式为准(后来者居上原则)。

2.继承方式冲突

继承,指的是CSS的继承性。

(1)“ 最近的祖先元素 ”获胜

如果由于继承方式引起的冲突,则“ 最近的祖先元素 ”获胜最近的祖先元素,指的是当前元素的父元素

(2)示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <style type="text/css">
            body{
                color:red;
            }   
            #grandfather{
                color:greenyellow;
            }
            #daddy{
                color:palegreen;
            }
        </style>
    </head>
    <body>
        <div id="grandfather">
            <div id="daddy">
                <div id="girl">
                    “ 最近的祖先元素 ”获胜
                </div>
            </div>
        </div>
    </body>
</html>

<!--
    字体最终颜色为 palegreen ,girl最近的祖先元素为daddy,若daddy元素没有定义color属性,则最近的祖先元素为grandfather。
-->

继承方式冲突示例1.png

3.指定样式冲突

指定样式,指的是指定” 当前元素 “的样式。 指定样式冲突,指的是指定” 当前元素 “的样式发生冲突

(1)” 权值高者 “获胜

当直接指定的样式发生冲突时,样式权值高者获胜。

① 选择器权值

选择器

权值

通配符

0

伪元素

1

元素选择器

1

class 选择器

10

伪类

10

属性选择器

10

id 选择器

100

行内样式

1000

常见的伪元素只有 4 个:

  • ::before
  • ::after
  • ::first-letter
  • ::first-line

常见的伪类:

  • :hover
  • :first-child
Ⅰ.常用的选择器优先级

行内样式 > id选择器 > class选择器 > 元素选择器

(2)示例

① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS优先级</title>
        <style type="text/css">
            #first{
                color:skyblue;      /*id选择器,权值为 100*/
            }
            .class{
                color:greenyellow;  /*class选择器,权值为10*/
            }
            div{
                color:lightpink;    /*元素选择器,权值为1*/
            }
        </style>
    </head>
    <body>
        <div id="first" class="happy">
            2020/10/1,各位,双节快乐!!
        </div>
    </body>
</html>

<!--
    id选择器权重最高,因此最终颜色为skyblue;
    另外注意,不要只从样式顺序来判断,因为只有选择器权重相同时,才会遵从“后来者居上”原则。
-->

指定样式冲突示例1.png

② 例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS优先级</title>
        <style type="text/css">
            #outer p{
                /*后代选择器,权值为 100 + 1 = 101 */
                color:skyblue;      
            }
            #outer .inner{
                /*后代选择器,权值为100 + 10 = 110 */
                color:greenyellow;  
            }
            #outer p strong{
                /*权值为100 + 1 +1 = 102 */
                color:lightpink;    
            }
            #outer p span strong{
                /*权值为100 + 1 + 1 + 1 = 103 */
                color:lightpink;    
            }

        </style>
    </head>
    <body>
        <div id="outer">
            <p class="inner">
                <span>
                    <strong>
                        2020/10/1,各位,国庆节、中秋节快乐!!
                    </strong>
                </span>
            </p>
        </div>
    </body>
</html>

<!--
    strong标签最终颜色为 亮粉色(lightpink),我们可以看到权值中 #outer .inner 的权重最大,那为何不显示#outer .inner中定义的天蓝色(skyblue)。
-->

指定样式冲突示例2.png

Ⅰ.分析

其实之所以产生这种疑问,那是因为我们还没有真正地理解“指定样式冲突”是怎样一回事。 所谓的指定样式冲突,指的是“当前元素”的样式发生冲突。 在本例中,我们所针对的当前元素是 strong,然而“# outer inner{}”针对的元素是p( strong的祖先元素)并不是 strong 准确来说,如果当前元素为 strong,那么“# outerinner{}”和“# outer p”都属于继承样式。 在继承样式中,我们是不能用选择器权重这一套东西来计算的。进而总结如下:

Ⅱ.总结

CSS中,选择器权重的计算只针对指定样式(当前元素),并不能用于继承样式

4.继承样式与指定样式冲突

(1)指定样式获胜

当继承样式和指定样式发生冲突时,指定样式获胜

(2)示例

① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS优先级</title>
        <style type="text/css">
            body{
                /*权值为:1*/
                color:orangered;
            }
            #outer{
                /*权值为:100*/
                color:#FFC0CB;
            }
            #outer .inner{
                /*权值为:110*/
                color: #00FFFF;
            }
            span{
                /*权值为:1*/
                color: #DDA0DD;
            }
            strong{
                /*权值为:1,但这是指定样式*/
                color: #FFD700;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <p class="inner">
                <span>
                    <strong>
                        2020/10/1,各位,国庆节、中秋节快乐!!
                    </strong>
                </span>
            </p>
        </div>

    </body>
</html>

继承样式与指定样式冲突示例1.png

Ⅰ.分析

由于CSS的继承性, strong元素分别从body、div和p这三个元素继承了 color属性,但这些都属于继承样式。 最后,由于strong {color: Black;}这一句指定了 strong元素的 color属性,也就是指定样式,因此最终 strong元素color属性为 #FFD700。

Ⅱ.总结

对于样式冲突,我们不能笼统地用权重值来计算。 在CSS中,选择器权重值的计算只针对指定样式(当前元素),并不能用于继承样式继承样式和指定样式发生神突时,指定样式获胜。我们先判断指定样式,然后才考样式。

5.!important

CSS中,我们可以使用!important规则来改变样式的优先级

(1)覆盖其它所有样式

如果一个样式使用!important来声明,则这个样式会覆盖CSS中所有其它样式声明。 你可以这样理解,如果你一定要使用某个样式属性,为了不让它被覆盖,那么你就可以使用 !important来实现。 也可以这样理解,如果你想要覆盖其它所有样式,可以使用!important来实现

(2)!important两种使用情况

在CSS中,!important常见有以下两种使用情况:

① 情况一

在外层有id选择器的情况下(也就是高权值),你怎样让元素选择器(也就是低权值)里定义的样式得到应用。 (简单来讲,低权值的样式胜过高权值的样式而得到应用) 在这种情况下,如果不使用 !important,则第一条样式永远比第二条样式优先级更高。

Ⅰ.例1
#happy p{
    color:yellow;
}
p{
    color:pink !important;  /*这样一来,低权值的元素标签,就得到了应用*/
}
② 情况二

在和小伙伴们一起做项目时,我们可能会碰到这种情况:你或者小伙伴写了一些效果不尽如人意的行内样式(行内样式优先级往往是最高的),假如你要在内部样式表或外都样式表中修改这个样式,你就应该想到在内部样式表或外都样式表中使用!important来覆盖那些糟糕的行内样式

Ⅰ.例

比如说:有人在jQuery中写了不尽如人意的行内样式,而你需要在CSS文件中修改这些样式。

(3)如何覆盖 important

想要覆盖!important声明的样式很简单,共有两种解决方法:

① 使用相同的选择器,再添加一条!important的css语句

不过这个CSS语句得放在后面。 因为在优先级相同的情况下,后面定义的会覆盖之前的。(后来者居上原则)

②使用更高优先级的选择器,再添加一条!important的css语句

使用!important可以将样式提升到最高级,不管这个样式是在哪个选择器中。 如果在同一样式中出现了多个!important,则遵循后来者居上原则。

(4)实际开发

在实际开发的过程中,我们经常会遇到写在后面的被写在前面的样式覆盖了,这时就应该考虑一下是否是CSS优先级引发的问题了解CSS优先级规则,能够为我们提高不少开发效率。对于样式冲突这五种情况,我们只需要认真地把每一个规则都理解一遍就可以啦,而并不需要记住。在我们经过一定的实战之后,自然会有深刻的理解。

(5)CSS优先级的黄金定律

对于CSS优先级,主要有以下两个黄金定律:

  • 优先级高的样式覆盖优先级低的样式
  • 同一优先级的样式,后定义的覆盖先定义的,也就是“后来者居上”原则

(6)示例

① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS优先级</title>
        <style type="text/css">
            #outer strong{
                /*权值:100+1 = 101 */
                color:#FFC0CB;
            }
            #outer .inner strong{
                /*权值:100+10+1 = 111 */
                color: #00FFFF;
            }
            .inner strong{
                /*权值:10+1=11*/
                color: #DDA0DD;
            }
            .inner span strong{
                /*权值:10+1+1=12*/
                color: #FFD700;
            }
            strong{
                color:#66A9FE !important; /*权值最高*/
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <p class="inner">
                <span>
                    <strong>
                        2020年10月1日,各位,国庆节、中秋节快乐!!
                    </strong>
                </span>
            </p>
        </div>
    </body>
</html>

!important示例1.png

Ⅰ.分析:

#outer .inner strong权值最高,但由于“ strong()”中应用了 !important,因此strong元素 color属性值最终为 #66A9FE。