[分享]css元素选择器权重

CSS（层叠样式表）是网页设计中不可缺少的一部分，它可以用于实现网页的美化、布局和交互等功能。而CSS选择器就是用来定位HTML文档中某个元素，以便为其设置样式的一个重要工具。CSS选择器按照优先级可...

CSS（层叠样式表）是网页设计中不可缺少的一部分，它可以用于实现网页的美化、布局和交互等功能。而CSS选择器就是用来定位HTML文档中某个元素，以便为其设置样式的一个重要工具。

CSS选择器按照优先级可分为：元素选择器、类选择器、ID选择器和属性选择器等多种类型。在实际开发中，当我们对同一个元素设置了多个CSS样式时，就需要了解CSS元素选择器的权重计算规则，以避免出现样式混乱等问题。

以下是CSS选择器的优先级（从高到低）：

 !important  （权重值为无穷大，优先级最高）
  行内样式  （权重值为1000）
  ID选择器  （权重值为100）
  类选择器、属性选择器、伪类选择器  （权重值为10）
  元素选择器、子选择器、相邻选择器  （权重值为1）
  通配符选择器、继承样式  （权重值为0） 

以上选择器的权重值均为十进制数，比如说：选择器 A 采用了1个 元素选择器 和1个 类选择器，选择器 B 采用了1个 ID选择器，那么A和B谁的优先级更高呢？根据权重计算规则：A的权重值为11，而B的权重值为100，因此B的优先级更高。

需要注意的是，CSS元素选择器的优先级计算不是简单的「加法」，而是涉及到某些特殊情况下的「优先级溢出」问题。当选择器的权重值相同时，后定义的样式会覆盖先定义的样式。如果权重值都为0，那么就按照书写顺序，后写的样式会覆盖先写的样式。

在实际应用中，为了避免样式的混乱和优先级的不合理，我们应该尽可能地简化CSS选择器，减少不必要的权重值。比如说，可以采用「类选择器 + 元素选择器」的组合方式，避免使用ID选择器，同时可以优先使用行内样式或内联样式表来定义样式，以提高代码的可维护性和适应性。