理解CSS优先级：标签、类与ID的选择器权重

"CSS标签选择器优先级.pdf" 在CSS中，选择器的优先级是决定样式生效的关键因素。优先级的规则主要分为四个原则，这些原则帮助开发者在多个样式规则冲突时确定哪个规则将被应用。 ### 原则一：继承不如指定 这是CSS优先级的基础原则，即继承的样式不如直接指定的样式优先级高。当一个元素从其父元素继承样式时，如果在后代元素中有更具体的样式声明，那么这个更具体的声明将覆盖继承的样式。例如： ```html <style> * {font-size: 20px;} .class3 {font-size: 12px;} </style> <span class="class3">我是多大字号？</span> ``` 在这个例子中，`.class3` 的 `font-size` 为 12px，而不是继承的 20px，因为 `.class3` 的样式是直接指定的，优先级高于通用选择器 `*` 继承的样式。 ### 原则二：#ID > .class > 标签选择符 ID选择器（#id）的优先级高于类选择器（.class），类选择器又高于标签选择器（element）。例如： ```html <style> #id3 {font-size: 25px;} .class3 {font-size: 18px;} span {font-size: 12px;} </style> <span id="id3" class="class3">我是多大字号？</span> ``` 在这个例子中，尽管 `.class3` 和 `span` 都定义了 `font-size`，但 `#id3` 的优先级最高，因此字体大小为 25px。 ### 原则三：包含越具体越强大 这意味着，对于同一个元素，如果有多条选择器匹配，而其中一条选择器指定了更多的属性或更精确的路径，那么这条选择器的优先级就更高。例如： ```html <style> .class1.class2.class3 {font-size: 25px;} .class2.class3 {font-size: 18px;} .class3 {font-size: 12px;} </style> <div class="class1"> <p class="class2"><span class="class3">我是多大字号？</span></p> </div> ``` 这里，`.class1.class2.class3` 是最具体的，所以字体大小为 25px，即使 `.class2.class3` 和 `.class3` 也匹配了同一个元素。 ### 原则四：行内样式权重最高 行内样式（如 `style="..."`）具有最高的优先级，无论其指定的样式如何，都会覆盖外部或内部CSS中的任何样式。例如： ```html <span style="font-size: 30px;" class="class3">我是多大字号？</span> ``` 在这种情况下，行内样式的 `font-size` 为 30px，即使有其他更高优先级的选择器存在。 总结来说，CSS选择器的优先级顺序大致为：行内样式 > ID选择器 > 类选择器 > 标签选择器。在编写CSS时，理解这些优先级原则可以帮助避免样式冲突，提高代码的可维护性和可预测性。