css优先级高低排列-CSS 选择器权重和优先级规则

bendan520 css

2023-09-02 0 6,607 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

一般来说，大多数前端工程师对于CSS样式优先级的概念停留在以下几个方面：

注：>表示高优先级或低优先级，|表示优先级表示优先级相同

!important>内联样式>id>类|属性>标签选择器>通配符

但事实上，css是有权重的。并且还可以估计，

当我们使用 CSS 为网页元素定义样式时，经常会遇到这样的情况：我们需要将通用样式应用到通用元素上，然后在更具体的元素上覆盖它们。那么我们如何保证我们新定义的元素样式能够覆盖目标元素上原有的样式呢？

在CSS中，定义的样式规则的顺序是根据选择器的特殊性来确定的。具有更具体选择器的规则优先于具有普通选择器的规则。如果两个规则的特殊性相同，那么后面定义的规则会优先（这个非常重要，这个非常重要，这个非常重要，就是你定义的样式，比如在一个css中文件中，旁边写的样式会覆盖后面的样式，因为引用样式时，是根据顺序导出的，如果是按顺序导出的话，就会加载一个与找到的所有样式对应的标签，如果是稍后加载，上面的重复将覆盖后面的样式）。

我们将特异性分为 4 个级别。我们首先必须知道这一点。该级别并不代表您最终风格的引用顺序。我们需要能够根据这个级别来确定样式的引用顺序。 4个级别如下：

内联样式定义在html标签中，以下样式属性直接嵌入div标签中：

要通过 id 引用样式，您可以将其写入 css 文件或 html 中。您需要在 html 中使用括号，但不能在 css 文件中使用。在id上使用#来判断：


    #content{
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background: #333333;
    }

相同 ID，使用 . 判断

你的风格重量与你的写作风格有很大关系。同一个标签如果写法不同，样式权重也会不同，如下：




    
        
        
    
    
        #username{/*权重：100*1=100*/
            font-size: 14px;
            color: #333333;
        }
        #users_info #username{/*权重：100*2=200*/
            font-size: 15px;
            color: #1B6D85;
        }
        #users_info a{/*权重：100*1+1=101*/
            font-size: 16px;
            color: #398439;
        }
        .user_info #username{/*权重：100*1+10*1=110*/
            font-size: 17px;
            color: #66512C;
        }
        .user_info a{/*权重：10*1+1*1=11*/
            font-size: 18px;
            color: #843534;
        }
        #in_block .user_info #username{/*权重：100*2+10*1=210*/
            font-size: 19px;
            color: #8A6D3B;
        }
        .contain #in_block .user_info #username{/*权重：100*2+10*2=220*/
            font-size: 20px;
            color: #C7254E;
        }
        #content #in_block .user_info a{/*权重：100*2+10*1+1*1=211*/
            font-size: 21px;
            color: #F0AD4E;
        }
    
    
        
            
                
                    注意我的字体大小和颜色

根据前面的权重估算，我们可以知道不同文体的参考顺序是不同的。权重越小，首先引用的权重越小。如果后面的重量级样式具有与上面相同的属性css优先级高低排列，则前面的样式将被覆盖。这里，因为样式都是字体和颜色样式，所以前面的样式会完全覆盖第一个引用的样式。显然最终的样式是权重为220的样式，如果我现在在权重为11的样式中添加font-family:“微软雅黑”，则不会被覆盖，因为font-family并没有出现在之前的样式中那些。这个性质。你要知道里面的所有样式都会被加载。如果存在重复定义的属性css优先级高低排列，则重复的属性会根据权重被覆盖。

问题解决了

问题一：两个权重相同的样式映射到一个标签，会覆盖哪一个？

这是除去重量后的另一个影响因素。同样的权重与你的写作顺序有关。后面写的内容会被旁边的内容覆盖。请注意，顶部被下一个覆盖，如下所示：



    
        
        
    
    
        .user #username{/*权重：100*1+10*1=110*/
            font-size: 14px;
            color: #333333;
        }
        #users_info .user_name{/*权重：100*1+10*1=110*/
            font-size: 15px;
            color: #1B6D85;
        }
    
    
        
            
                
                    注意我的字体大小和颜色

最终的样式将是 font-size: 15px; 颜色：#1B6D85；。先定义，再加载。如果先加载它，它很可能会被旁边的覆盖。修改订单样式将变为font-size: 14px; 颜色：#333333；

问题2：重量相同。如果一种样式在html中定义，另一种样式在css文件中定义，哪一种会被覆盖？

样式将与您导入它的顺序相关。 HTML中定义的样式实际上是导入的CSS文件，但是这个文件已经在HTML中了，所以不需要加载CSS文件。所以你引入的顺序决定了你的样式，如下



    
        
        
    
    
        #users_info .user_name{/*权重：100*1+10*1=110*/
            font-size: 15px;
            color: #1B6D85;
        }
    
    
    
        
            
                
                    注意我的字体大小和颜色

测试.css：

.user #username{/*权重：100*1+10*1=110*/
    font-size: 14px;
    color: #333333;
}

虽然权重一样，但由于test.css的引入顺序在style标签之后，所以后加载会覆盖上面的style标签，最终显示的是test.css中的样式。

问题3：同一个标签被多个类名修饰。类名的顺序会影响风格吗？



    
        
        
    
    
        .left_posion{/*权重：10*1=10*/
            font-size: 17px;
            color: #67B168;
        }
        .name_font{/*权重：10*1=10*/
            font-size: 16px;
            color: #000000;
        }
        .user_name{/*权重：10*1=10*/
                font-size: 15px;
                color: #1B6D85;
            }
    
    
        
            
                
                    注意我的字体大小和颜色

最终的样式是.user_name的样式，也就是说class="user_name name_font left_position"这三个类是同一级别的。没有区别。它只与你的风格的重量和你写它的顺序有关。

问题4：(id,class,label)的权重真的等于(100,10,1)吗？

答案是否定的，如下。按照上面的估计方法，111明显小于101，但是使用的样式是#username a，也就是说上面提到的震级1000、100、10、1都是错误的。我非常强调这一点。，有几个类别没有具体的值。区分的方法是先看类别。假设我包含了 id 而你没有，那么我可以覆盖你。如果还包括 id，那么它会覆盖比数字更多的内容。如果数量少，如果数量相同，则看包含的类，然后看标签的数量。如果id、class、tag的个数都一样的话，看一下写的顺序（下面的代码只是为了说明100不是一个固定的数字，一般不要写十一个class来定位标签样式... ）：



    
        
        
    
    
        .contain .c_1 .c_2 .c_3 .c_4 .c_5 .c_6 .c_7 .c_8 .c_9 .c_10 a{/*权重：10*11+1*1=111*/
            font-size: 21px;
            color: #F0AD4E;
        }
        #username a{/*权重：100*1+1*1=101*/
            font-size: 19px;
            color: #8A6D3B;
        }
    
    
        
            
                
                    
                        
                            
                                
                                    
                                        
                                            
                                                <div class="c_10"
                                                    
                                                        注意我的字体大小和颜色