#contenth1{//htmlheader因为htmlheader离元素有点近所以生效padding:10px;}前言很多人都听说过CSS权重，也略知一二，但是对于CSS权重等具体规则或者更深层次的问题，很多人可能不是那么清楚。在日常开发中，我们或多或少会遇到css规则不生效的问题。为了减少调试css规则的时间，深入理解css权重是非常重要的。喜欢的话可以点赞/关注，支持一下。希望你看完这篇文章后有所收获。看看我的个人博客：Obkoro1.com权重规则总结：!important的优先级最高，但也会被important重要权重覆盖。内联样式总是会单独使用一个选择器覆盖外部样式表中的任何样式（除了！important）有时，css规则不能跨层生效。如果两个不同权重的选择器作用于同一个元素，则权重值高的css规则生效。如果两个权重相同的选择器作用于同一个元素：使用后面出现的选择器作为最后一条规则。当权重相同时，靠近元素的选择器使用的css权重优先级是多少？同一个元素使用不同的方法声明相同的一个或多个css规则，浏览器会根据权重来判断哪种声明方法与这个元素最相关，从而将这个声明方法应用于这个元素的所有css规则.五个级别的权重及其权重！重要；内联样式；ID选择器，权重：100；类、属性选择器和伪类选择器，权重：10；属性选择器是指：根据元素的属性和属性值来选择元素，比如button的type属性等。伪类选择器：:active:focus等选项。标签选择器和伪元素选择器，权重：1；伪元素选择器：:before:after层次关系：!important>内联样式>ID选择器>类选择器|属性选择器|伪类选择器>元素选择器权重规则：1.不推荐使用!important。不推荐使用!important，因为!important根本没有结构和上下文，很多时候权重的问题是因为不知道哪里定义了一个!important导致的。Overrideimportant：虽然我们应该尽量避免使用!important，但是你应该知道如何覆盖important，你可以通过增加一些权重来实现。codepen的demo//!important优先级最高，但也会被important权重覆盖aaa#a{background:blue!important;/*id的important覆盖了class的important*/}.a{background:red!important;}2。内联样式外部样式表中的任何样式总是会被覆盖，并且会被!important覆盖3.单独使用选择器时，css规则不能跨层生效无论有多少个选择器由类组成，没有一个ID选择器具有很高的权重。同样，不管有多少选择器由元素组成，也没有类选择器权重高，不管有多少ID由选择器组成，也没有内联样式权重高。代码笔演示；demo中用11个类组成一个选择器，最后是一个ID选择器，设置样式生效。可以想象，如果不突破等级制度，就无法比较玄幻小说中的等级制度。因此，只有当两侧处于同一水平时才比较权重。4.如果两个不同权重的选择器作用于同一个元素，权重值高的css规则的有效选择器可能包含一个或多个权重相关的计算点。如果权重值计算出的权重值较大，则认为选择器的权重高。举个简单的栗子：.test#test{}//id100+class10=110;.test#testspan{}//id100+class10+span1=111;.test#test.sonClass{}//id100+class10+class10=120;//效果5.如果两个权重相同的选择器作用在同一个元素上：后出现的选择器为最后一条规则。demo啦啦啦
