CSS定义的权重

CSS定义的权重

• 第一等：代表内联样式，如: style=””，权值为1000。
• 第二等：代表ID选择器，如：#content，权值为100。
• 第三等：代表类，伪类和属性选择器，如.content，权值为10。
• 第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

最后把这些值加起来，再就是当前元素的权重了。

权重算出来了，但是某个元素到底用哪个样式，还有3个规则,：

如果样式上加有!important标记

例如：

p{ color: gray !important}

那么始终采用这个标记的样式。

匹配的内容按照CSS权重排序，权重大的优先

可以看到，CSS权重只是决定应用哪个样式的其中一个步骤，不过这个步骤是最复杂的，上面已经说过了。

如果权重也一样，按照它在CSS样式表里声明的顺序，后声明的优先

h1 {color: blue}
h1 {color: red}

最终胜出的是 color:red。

精简总结

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！