CSS样式优先级

CSS样式优先级

CSS的样式所遵循的基本原则就是：高权重高于低权重，权重相同则后写覆盖先写。

1、CSS选择器优先级

CSS选择器优先级：选择器越小越精确，优先级就越高

权重值分别是：1000，100，10，1，0

如果是复合的选择器，就比较器权重值。

比如#box p .tt 权重为111

2、多个相同选择器设置的样式冲突时

后设置的优先级高。

如<div class=“box content”>123

Q：这个标签有两个样式，如果这两个样式都设置背景色，那么到底哪个生效呢？

A：取决于在css样式表中，box和content这两个样式谁在 后 。而不取决于标签类名谁在前。即生效的是content的样式。

3、！important 提升优先级

如：#oDiv{color:red !important;}

代表将其优先级提到无限高。

esp：不建议作为常态使用，特殊情况下使用。且不能针对继承的属性进行优先级提升。

4、特别注意：内部样式表的优先级不一定高于外部样式表。

一般我们认为，内部样式表的优先级是高于外部样式表的优先级的。但是这只是选择器优先级相等的情况下。如果外部样式表和内部样式表同时设置一个样式，且外部样式表的选择器优先级更高，那么将会是外部样式表生效。

如

在外部样式表中设置：.a .b{color:red}；

在内部样式表中设置：.b{color:blue}；

那么最终颜色应该是red，因为此时外部的选择器优先级高。

---

新人浅见，敬请指摘