编程教育资源分享平台

网站首页 > 后端开发 正文

CSS中的选择器优先级权重比较

luoriw 2024-02-01 14:27:00 后端开发 12 ℃ 0 评论
<style>
 a{
 color: red;
 }
 #box a{
 color: green;
 }
 [class="box"] a{
 color: gold;
 }
 .box a{
 color: purple;
 }
 p a{
 color: yellow;
 }
 </style>
 <p id='box' class="box"> <a>hello</a></p>

请问上面代码中,a标签中文字的最终颜色是什么?知道CSS选择器优先级规则的童鞋都知道,在CSS中优先级顺序如下:

ID选择器 > class选择器 > tag选择器

所以,上面代码的颜色,大家都会选择 #box a{ color: green;} 绿色。这个答案没错。 如果我们把这一条规则从style标签中移除呢,那么a标签文字的颜色应该是哪个?

答案是: purple。

a{color:red} 和 p a {color : yellow;}的优先级肯定没有其它两项高,不需要考虑。在 [class="box"] a和.box a中,后者的顺序比较考后,会覆盖之前的样式,所以颜色是purple。

这也许会是一些人的答案,不能不说不对。那么如果这中情况下呢?

 <style>
 #box{
 color: green;
 }
 </style>
 <p id='box' class="box" style="color: red;"> hello </p>

不用说,大家都知道会使用style="color: red;"属性定义的颜色,是red。

那么,css所遵从的具体规则是什么呢?

权重计算规则

  • 第零等:!important, 大过了其它任何设置。
  • 第一等:代表内联样式,如: style=””,权值为1000。
  • 第二等:代表ID选择器,如:#content,权值为0100。
  • 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
  • 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
  • 第五等:通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
  • 第六等:继承的样式没有权值。

计算规则

!important 和内联样式style都属于不讲理的那种,

只要存在 !important,!important便具有最高优先级;

如果不存在 !important,存在style,那么style便具有最高优先级;

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言