css的优先级

时间：2017-04-06 21:15:35 阅读：221 评论：0 收藏：0 [点我收藏+]

标签：前端开发文件中 size lib 技术 min ext 图片 indent

凡是做前端开发的，想必都知道css样式的优先级，如果我现在让你回答，你肯定会说出一个标准答案来：行内样式>内部样式>外部样式。

但是这个答案也仅仅是个答案罢了。真正在实际使用过程中你会发现，这个标准答案有时也会让你挠头感到纳闷。下面我简单介绍一下隐藏在css优先级下面的一些不为人知的秘密，当然，前端大神的话直接忽略就可以了。我把话题抛出来，算是抛砖引玉吧。

刚才已经说了，css优先级的顺序为行内样式大于内部样式，内部样式大于外部样式，也就是经常提到的就近原则。但是这里也有一个小例外，那就是外部样式在内部样式的后面引入。如果你把外部样式在内部样式后面引入，你会发现相同类名或者ID定义的样式，行外的优先级是高于行内的，这就归因于浏览器加载css样式的时候是顺序加载的，放在后面的样式会覆盖前面的。其实这个也可以用就近原则来解释，谁离标签近，谁生效嘛。

这时候，外部样式文件中设置的字体颜色会生效。

其实，css样式和引入的顺序有直接关系之外，还和css选择器的优先权有直接关系。废话不多说，先上一个图：

看到图大家应该能理解什么意思了，我下面跟点css样式代码，再简单给大家介绍一下上面图片什么意思。

根据上图给的权值，通过权值计算，得到针对em标签的两个样式权值，分别为111和103。权值越大，样式的优先级越高。这时候就近原则已经无法解释了。这就是css权值计算带来的改变。

其实除了样式文件的引入顺序和样式权值可以改变样式的优先级以外，还有另外一个大家可能会接触到的更改css样式的关键字。那就是”!important”。如果你在使用一个框架，发现某一个样式总是覆盖不掉。又或者你定义了一个样式，想拥有最终的控制权，怕被别人的样式覆盖掉。那就检查或者使用”!important”吧，用它修饰的样式拥有最高的控制权。

css的优先级

标签：前端开发文件中 size lib 技术 min ext 图片 indent

原文地址：http://www.cnblogs.com/professionfeng/p/6675170.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行