关于CSS优先级问题

之前遇到这种问题一直简单粗暴的使用 !import,今天在老大的指引下才发现这里面也大有文章,下面梳理一下我自己的理解。

首先,css优先级顺序:内联样式 > id选择器 > 类选择器 = 属性选择器 = 伪类 > 元素选择器 > 通用选择器(*) > 继承的样式;

然后具体先解释一下这些选择器都是什么鬼,当然css基础好的童鞋可以忽略这一段。

内联样式:<div style=“color:’red’;">内联样式</div>

Id选择器: <div id=“test">Id选择器</div>    #test {color:red;}

类选择器:<div class=“test">类选择器</div>    .test {color:red;}

属性选择器:<div content="属性选择器">属性选择器</div>   [content] {color:red;}

                      <h2 title="Hello world">Hello world</h2> 

{color:red;} <a href="[http://w3school.com.cn](http://w3school.com.cn)">W3School</a> [href]{font-size:40px} 伪类:<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p> <p><b>注释:</b>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!</p> <p><b>注释:</b>在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!</p> <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> 元素选择器:<h1>这是 heading 1</h1> <h2>这是 heading 2</h2> <p>这是一段普通的段落。</p> html {color:black;} p {color:blue;} h2 {color:silver;} 通用选择器:<div class=“test">通用选择器</div> *.test {color:red;} 然后我们来了解一下优先级的计算方法: a、用a表示选择器中ID选择器出现的次数 b、用b表示类选择器,属性选择器和伪类选择器出现的总次数。 c、用c表示标签选择器、伪元素选择器出现的总次数 d、忽略通用选择器 e、然后计算a*100+b*10+c的大小,这就是优先级了。 权重:内联样式1000》id选择器100》class选择器10》标签选择器1 总结:ID选择器「如:#header」,Class选择器「如:.foo」,属性选择器「如:[class]」,伪类「如::link」,标签选择器「如:h1」,伪元素「如::after」,选择器「*」 最后我们再来了解一下为什么我常用的!important没有列入优先级中,因为官方认为!import和优先级没一点关系。 不建议使用!import
  • Never 绝不要在全站使用!import。

  • Only 只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important

  • Never 永远不要在你的插件中使用 !important

  • Always 要优先考虑使用样式规则的优先级来解决问题而不是 !important

选择元素时尽量不要多选,不要放宽选择器的范围。因为范围越小,越具有针对性,优先级越高。

  但是什么时候需要使用!import呢?

 使用!import的场合也是有的,但是是在没有别的解决方案的时候。

比如需要覆盖内联样式,因为内联样式的优先级最高,只能用!import去覆盖内联样式。

    原文作者:爱吃荔枝的张长弓
    原文地址: https://www.jianshu.com/p/5b166e2cff2c
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞