今天在写一个前端文件的时候发现有一个样式突然没有了作用,但是按照优先级来说应该后面的前面的才对。
然后研究了一下 css 当中的优先级到底是怎么回事,才发现原来都是权重的锅

选择器的权重

分为四个等级,权重值越大表示优先级别越高

权重表

选择器例子权重值
内联样式style=''1000
id 选择器#title100
类,伪类,属性选择器.title,:hover ,a[href]10
类型选择器,伪元素选择器p, :before1
通用选择器,子选择器和相邻同胞选择器*,>,+0

一个例子

sytle

/*权重=100+1=101*/
#title h2 {
  color: red;
}

/*权重=10+1=11*/
.content h2 {
  color: blue;
}

/*权重=100+1=101*/
#title a {
  color: orange;
}

/*权重=100+10=110*/
#title a[href] {
  color: green;
}

html

<div id="title">
  <h2>我是标题</h2>
  <div class="content">
    <h2 style="color:#333;">我是内容</h2>
    <!--权重=1000-->
    <a href="http://lxl520.com">lxl520</a>
    <a>0...0</a>
  </div>
</div>

层叠原理(或者说是就近原则

当两个样式的优先级一样时,会自动选择最近的一条样式

<style>
  #title {
    color: red;
  }
  #title {
    color: blue;
  }
</style>
<h2 id="title">我到底啥颜色</h2>

例外(!important)

在属性的后面加上!important 可以用来提权,就好比直接获得管理员权限一样,这这个属性会变成最高优先级

<style>
  h2 {
    color: red !important;
  }
</style>
<h2 style="color:blue;">我想必应该是蓝色</h2>

注意

  1. 一些不成文规则

    • 不要在全站范围的 css 中使用!important.
    • 只在需要覆盖全站范围的 css 或是外部 css(例如引用的 ExtJs 或是 YUI)的时候才在指定的页面上使用!important
    • 不要在你的插件中使用!important
    • 永远都要优先考虑使用样式规则的优先级来解决问题而不是!important
  2. 如果你和我一样遇到了似乎没有起作用的 CSS 规则,请试试在你的选择器中添加他的一个父元素的 ID,从而提高它的特殊性。看看能不能解决问题


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!

js编码解码URL 上一篇
EmotionCamera 下一篇