对css中选择器的优先级和优先权的思考总结

ゞ浴缸里的玫瑰 2022-05-18 00:09 98阅读 0赞

我们知道css样式有三种形式  
1：行内样式；  
2：内部样式；  
3：外部样式；  
那你知道如果对于同一元素的同一属性，上述三个样式都设置了一遍，最后显示的是以谁为准的么？  
可能大多数的人都会说：行内样式>内部样式>外部样式；至少以前我是这么认为的；接下来就用代码结合解释详细的描述一下样式的优先级和优先权的不同所带来的不同样式表现。

## 优先级 ##

**一：内部样式和外部样式的优先级**  
在比较之前，先看这样两段代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>样式优先级的比较</title>
    
        <style type="text/css">
            #s3 {
                color: red;
            }
        </style>
    
        <style type="text/css">
            #s3 {
                color: blue;
            }
        </style>
    </head>
    <body>
    <p id="s3">中华人民共和国万岁</p>
    </body>
    </html>

**运行结果**：此时p标签中的文本显示的颜色是blue

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>样式优先级的比较</title>
    
         <style type="text/css">
            #s3 {
                color: blue;
            }
        </style>
    
        <style type="text/css">
            #s3 {
                color: red;
            }
        </style>
    
    </head>
    <body>
    <p id="s3">中华人民共和国万岁</p>
    </body>
    </html>

**运行结果**：此时p标签中的文本显示的颜色是red

**分析：**通过对以上两段代码分析可以得出，样式的优先级的比较基础是**就近原则**。

**注意：在使用外部样式的时候，link标签的实际意义是将外部样式表中的样式复制粘贴到link标签所在的位置，这个时候它相当于是放在style标签中的内部样式，此时他的优先级的高低就会取决于他和内部样式的排列顺序。**

上代码！

/*这里是外部样式表文件的代码区*/
    #s3 {
        color: yellow;
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>样式优先级的比较</title>
        
        <link rel="stylesheet" href="../../css/first.css">
        
         <style type="text/css">
            #s3 {
                color: blue;
            }
        </style>
    </head>
    <body>
    <p id="s3">中华人民共和国万岁</p>
    </body>
    </html>

**运行结果：**此时p标签中的文本显示的颜色是blue

*而当我替换link标签和style标签的位置的时候，此时我的p标签的文本显示的颜色是yellow===这就说明内部样式优先级>外部样式优先级这种说法是不严谨的，他在正常顺序的情况下可以这么说，但是在顺序倒置的情况下，他的优先级就变了，所以根本上还是**就近原则决定了优先级***！

**二：上述两个样式和行内样式优先级进行比较**

/*这里是外部样式表文件的代码区*/
    #s3 {
        color: yellow;
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>样式优先级的比较</title>
        
        <link rel="stylesheet" href="../../css/first.css">
        
         <style type="text/css">
            #s3 {
                color: blue;
            }
        </style>
    </head>
    <body>
    <p id="s3" style="color: fuchsia">中华人民共和国万岁</p>
    </body>
    </html>

**运行结果：**此时p标签中的文本显示的颜色是 fuchsia（粉红色）  
**分析**：不论内部样式，外部样式的顺序是什么样的，只要设置了行内样式，标签的显示样式就由行内样式所决定，这也是**就近原则决定优先级**。（特殊情况下：使用关键字！important）

## 优先权 ##

下图中列出了一些设置标签样式的属性或者选择器以及他们的权重  
![这里写图片描述][70]  
上代码！

**一：选择器和行内样式的权重比较**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>优先权的练习</title>
        <style type="text/css">
            .kdiv #kp #ks{
                /*权重计算：10+100+100=210*/
                color: fuchsia;
            }
            div #kp #ks{
                /*权重计算：1+100+100=201*/
                color:red;
            }
            #ks {
             /*权重计算：100*/
                color:blue;
            }
        </style>
    </head>
    <body>
            <div class="kdiv">
                <p id="kp">
                    <span id="ks" style="color: green">
                        中华人民共和国万岁 
                    </span>
                </p>
            </div>
    </body>
    </html>

**声明：上述代码每一个样式都经过了测试，在单独存在的情况下，是可以成功的将文本改成设置的样式的。**

**运行结果**：span中的文本显示为green。

结合图和代码进行优先权值的计算得出每一个样式的优先权重，**优先权越大优先级越高。**

**二：！important 关键字**  
上图中的第三块内部样式代码的权重最低，为100，是不可能将这个样式应用到文本中的，但是可以使用关键字进行设置，上代码：

#ks {
             /*权重计算：100*/
                color:blue !important;
            }

**运行结果：**文本的颜色显示为blue，  
**分析：**使用了关键字之后，他的优先权瞬间增加到一个极大的权值，可以覆盖所有的同元素同属性样式。

**使用场景：**这个多用于前端引入框架时，开发者认为框架中的样式是不合适的，可以在内部样式表中进行重新定义（此时要注意link标签和内部样式设置的位置的关系）。但是有些样式无法进行重新定义，是因为框架开发者在设置自己样式表的时候使用了”!important”关键字，此时再进行重新定义的时候也需要使用”!important”关键字进行再覆盖，这个时候就要考虑就近原则对优先级高低的影响了！

**最后的总结：**  
1： 在优先级的判断中，内部样式和外部样式的优先级是不确定的，  
是由他们的位置所决定的，就近原则决定优先级。  
2：在三种样式的比较中，行内样式的优先级是最高的（在没有使用  
！important关键字的情况下）。  
3：在解决多样式共同作用于同一个元素的时候，需要先使用优先级  
来分析，解决不了就要用优先权来进行更加细致的权重分析。  
注意，优先级和优先权不能混着去解释一个问题。必须有次序！

[70]: /images/20220518/88e399d102c147c180640d61907a1e30.png