首页 > 代码库 > css优先级之特殊性

css优先级之特殊性

2024-09-06 18:19:34   215人阅读

在前端开发的时候，css构建样式规则，这个时候我们会遇到一个问题：当我们对同一个元素做多个样式规则，其中发生了冲突的时候，css是如何选择最终呈现的样式

如下：

            div{
                color:red;
            }
            div.main{
                color:blue;
            }
            div#main2{
                color:green
            }
 
    <body>
        <div class="main" id="main2">
　　　　　　ssss

        </div>
    </body>

最终这个“sss”会是什么颜色呢？这就却决于css选择器的特殊性：

特殊性的描述可分为四个部分：如：0，0，0，0

什么意思呢？这四个数字，是有优先级的，这就类似于nvidia的显卡

我们先做如下定义：

四个数字，按位比较，从左到右优先级依次降低，每一位数字越大，特殊性越大，特殊性越大，有冲突的选择器规则将被使用到最终效果

用于比较时候：

从左往右比较两个选择器的特殊性，比较按同位比，如果当前位上，选择器1大于选择器2，选择器1特殊性大；如果当前位上，选择器1小于选择器2，选择器2特殊性大；如果相等，跳过当前位，比较下一位，方法与当前位同理

举例：（由大到小的特殊性）

1，0，0，0>

0，2，0，0>

0，1，2，0>

0，0，3，0>

0，0，1，0>

0，0，0，1>0，0，0，0

请先理解上面的例子，后面我们使用这种方式描述特殊性

我们看到特殊性描述一共有4位数，就像数学里的千，百，十，个一样

第一位：内联样式

第二位：ID选择器（#main）

第三位：类选择器，属性选择器或伪类（.main 或 input[name=main] 或 a:hover li:first-child）

第四位：元素或伪元素(p,div,input等常用的元素，伪元素比如p:first-letter p:first-line)

通配符*(0,0,0,0)

空格什么都不算（0,0,0,0都谈不上，最小特殊性）对选择器特殊性没有任何影响

举例：

假设以下的选择器指向同一个元素，并且出现了矛盾

1 h1{color:red;}    /*0001*/
2 p em{color:silver;}    /*0002*/
3 .grape{color:purple;}    /*0010*/
4 *.bright{color:blue;}    /*0010*/
5 p.bright{color:green;}    /*0022*/
6 #id{color:black;}    /*0100*/
7 div#id{color:yellow;}    /*0111*/

很显然最后这个这个元素，是黄色（yellow），因为他的特殊性最大！

css优先级之特殊性


联系
我们