css选择器优先级顺序是什么？

定义的属性有冲突时，浏览器会选择用那一套样式呢，下面来介绍一下选择器的优先级。

一、css选择器优先级

不同级别

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

2. 作为style属性写在元素内的样式

3. id选择器

4. 类选择器

5. 元素选择器

6. 通配符选择器

7. 浏览器自定义或继承

总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性

同一级别

(1) 同一级别中后写的会覆盖先写的样式

(2) 同一级别css引入方式不同，优先级不同

总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。

对于选择器优先级，还可以通过计算权重值来比较。

例1、

test.css文件

#my{background:blue;}

html文件

<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
/*这里是内部样式*/
#my{background:red;}
</style>
<span id="my">333</span>

执行结果：span最后为红色。

说明css引入方式优先级：内部样式表 > 外部样式表

例2、

 <link rel="stylesheet" type="text/css" href="./css/test.css">
 <style>#my{background:red;}</style>
 <span id="my" style="background: yellow">333</span>

执行结果：span最后为黄色。

说明css引入方式优先级：内联(行内)样式 > 内部样式表 > 外部样式表

二、复杂选择器优先级，后代选择器优先级多种情况

有时候当我们写样式的时候会用到好多个后代样式，那么优先级的情况是什么情况呢。来看几个例子。

我这里举的例子有点少，如果你在学习，你可以多自己写几个例子看看效果。

1、 id个数多的优先级高

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

2、id个数相等的看class个数，class越多优先级越高

/*这个例子和题目不符，目的是为了让你看一下，这个span标签的样式是红色的。 
虽然第三个样式的class个数多，但是他这个样式的span标签的样式是继承的，看第一个的总结，
他的优先级是最低的。所以他没有选中的优先级高。这里我就不写了，自己在第三个样式p的后面在写上一个span标签。
你会发现他的样式优先级是最高的。*/
#box .head span{
    color:blue;
}
#box .head span{
    color:red;
}
#box .head .p{
    color:deeppink;
}
<div class="box" id="box">
    <div class="head">
        <p class="p"><span>我的颜色</span></p>
         
    </div>
</div>

3、id和class个数相等，看元素个数，个数越多优先级越高。

//颜色应用的是第一个的样式，粉色
#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>

4、优先级相同，后面的样式会覆盖前面的样式， 不分先后顺序，只看选择器类型和个数。

//蓝色，优先级相同，后面的覆盖前面的，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

以上就是css选择器优先级顺序是什么？的详细内容，更多请关注0133技术站其它相关文章！