What is the priority order of css selectors?

When we write the page, I wonder if you will have such a problem. Why is it that the style I added to it has clearly selected the element I want to give it, but its style does not take effect? When the defined attributes conflict, which set of styles will the browser choose to use? This chapter will introduce you to the priority order of CSS selectors. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Priority sorting of selectors

　1. ! important

　Writing this style after the attribute will override the style of the element defined anywhere on the page.

　2. Inline style, the style written in the style attribute.

3. id selector

4. class selector

5. Tag selector

6. Wildcard selector

7. Browser’s custom attributes and inheritance

The order of sorting written above is the priority/weight. You can try it yourself to compare their order of size.

2. Complex selector priority, descendant selector priority in various situations.

Sometimes when we write styles, we will use multiple descendant styles, so what is the priority situation? Let’s look at a few examples.

1. The one with more id has higher priority

#box .head span{
    color:blue;
}
.box .head span{
    color:red;
}<br data-filtered="filtered">//下面span标签的颜色是蓝色的
　　<div class="box" id="box">
　　　　<div class="head">
　　　　　　<span>我的颜色</span>
　　　　</div>
　　</div>

2. The number of id and class is equal, depending on the number of elements, the more the number, the higher the priority.

//颜色应用的是第一个的样式，粉色<br data-filtered="filtered">#box .head p span{
　　color:deeppink;
}
#box .head span{
　　color:blue;
}
#box .head span{
　　color:red;
}
 
<div class="box" id="box">
　　<div class="head">
　　　　<p class="p"><span>我的颜色</span></p>
　　</div>
</div>

3. The priorities are the same, and the later styles will overwrite the previous styles, in no particular order, only the selector type and number.

//蓝色，优先级相同，后面的覆盖前面的，id、class、元素的个数不分先后顺序
#box .head p span{
    color:red;
}
#box div .p span{
    color:blue;
}
 
<div class="box" id="box">
    <div class="head" id="head">
        <p class="p" id="p"><span>我的颜色</span></p>
    </div>
</div>

The above is the detailed content of What is the priority order of css selectors?. For more information, please follow other related articles on the PHP Chinese website!