详解 CSS 属性 - 优先级问题

ZoomQuiet 发布于2019-08-28 17:55 / 481人阅读

摘要：当你将一个样式添加到元素上却发现不起作用时，那就是遇到优先级问题了。那么应该如何处理优先级问题呢，下面我总结了一些解决优先级问题的常用法则。如内部样式外部样式内联样式此时显示的优先级是。

当你将一个样式添加到元素上却发现不起作用时，那就是遇到优先级问题了。那么应该如何处理 CSS 优先级问题呢，下面我总结了一些解决 CSS 优先级问题的常用法则。

样式距离

我们可以通过使用外部样式、内部样式、内联样式等方法给元素添加指定的样式，此时的优先级是:

外部样式 < 内部样式 < 内联样式

这个应该比较容易理解，也就是说离元素距离越近的样式优先级越大。如：


 //外部样式(color:green)
my color//内联样式

此时显示的优先级是 red > blue > green。所以 my color 显示为红色。

特殊的计算方法

假设有下面这段代码：



  my color

我们面对下面的 css，如何判断优先级呢？

这里介绍一种特殊的计算方法：

元素, 伪元素: 1 – (0,0,0,1)

类, 伪类, 属性: 1 – (0,0,1,0)

ID: 1 – (0,1,0,0)

内联样式: 1 – (1,0,0,0)

这里的属性指的是：

效果如下：

优先级从上往下依次增加，至于如何计算，同样举例说明：

p: 1个元素– (0,0,0,1)

div: 1个元素 – (0,0,0,1)

#idSelector: 1个ID – (0,1,0,0)

div#idSelector: 1个元素, 1个ID – (0,1,0,1)

div#idSelector p: 2个元素, 1个ID– (0,1,0,2)

div#idSelector p.classSelector: 2个元素, 1个类, 1个ID – (0,1,1,2)

所以现在我们再来看上面的例子：

  div p.classSelector {color: blue} - (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)
  #idselector p {color: red} - (0,1,0,0) + (0,0,0,1) = (0,1,0,1)

由于优先级上 (0,1,0,1) > (0,0,1,2)，所以我们知道最后显示的颜色为红色。

继承

继承是个比较好理解的概念，即子元素会继承父元素的样式。例如：


  my color

上例中的 span 会继承父元素 div 的样式。但不是所有的属性都会默认使用继承的方式，比如 margin 和 padding 属性。例如：


  my color

此时，元素 p 并不会继承父元素 div 的 margin 和 padding 样式，除非你这么做：


  my color

总结

1.首先找到所有作用在元素上的样式。（不要忽略来自继承的样式）
2.计算样式的作用距离，距离越近，优先级越大。
3.使用特殊的计算方法来判断同距离内的样式。
4.如果计算后的结果相同，那么后声明的样式覆盖先前声明的样式。
5.如果某个样式中设置 !important，则无论它的优先级如何，都以该样式为准。（除非迫不得已，强烈不建议使用这个方法，因为这无疑是不符合 css 思想的用法）

参考

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

混合云云服务器属性优先级属性详解属性选择器详解 Mask属性详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110897.html

CSS优先级详解

摘要：优先级是由选择器组成的匹配规则决定的。这些继承的样式的优先级永远低于元素本身的样式，包括通用选择器最终的颜色是红色的。永远都要优先考虑使用样式规则的优先级来解决问题而不是。概念浏览器是通过判断优先级，来决定到底哪些属性值是与元素最相关的，从而应用到该元素上。优先级是由选择器组成的匹配规则决定的。如何计算? 优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个对...

Juven 2019-08-28 17:53 评论0 收藏0
CSS优先级详解

摘要：优先级是由选择器组成的匹配规则决定的。这些继承的样式的优先级永远低于元素本身的样式，包括通用选择器最终的颜色是红色的。永远都要优先考虑使用样式规则的优先级来解决问题而不是。概念浏览器是通过判断优先级，来决定到底哪些属性值是与元素最相关的，从而应用到该元素上。优先级是由选择器组成的匹配规则决定的。如何计算? 优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个对...

n7then 2019-08-01 14:37 评论0 收藏0
性能优化详解

摘要：几个月前面试的时候问我性能优化我可能会开始背诵雅虎军规，加点，代码层面稍稍讲点，现在系统的梳理下性能优化的方方面面本文涉及方面有代码优化网络请求过程角度入手解析建立链接网络往返时延数据传输网络问题角度入手请求数量流量性能优化测试工具代码优化几个月前面试的时候问我性能优化我可能会开始背诵雅虎军规，加点webp，代码层面稍稍讲点，现在系统的梳理下性能优化的方方面面本文涉及方面有: 代...

piapia 2019-08-21 10:57 评论0 收藏0
性能优化详解

摘要：几个月前面试的时候问我性能优化我可能会开始背诵雅虎军规，加点，代码层面稍稍讲点，现在系统的梳理下性能优化的方方面面本文涉及方面有代码优化网络请求过程角度入手解析建立链接网络往返时延数据传输网络问题角度入手请求数量流量性能优化测试工具代码优化几个月前面试的时候问我性能优化我可能会开始背诵雅虎军规，加点webp，代码层面稍稍讲点，现在系统的梳理下性能优化的方方面面本文涉及方面有: 代...

godlong_X 2019-08-06 13:17 评论0 收藏0
详解css媒体查询

摘要：媒体查询，添加自，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。而且浏览器也不会根据媒体查询来动态的加载样式，它只是一股脑的将所有的样式引入。简介媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的语法. Media...

leone 2019-08-02 11:54 评论0 收藏0