CSS样式表继承和优先级

CSS样式表的继承和优先级是CSS的核心概念，它们决定了页面中元素最终的样式。

继承：

在CSS中，某些属性是可以继承的，意味着子元素将自动应用父元素的某些属性。例如，文本颜色（color）和字体大小（font-size）都是可以继承的属性。

/* 父元素的样式 */
p {
  color: blue;
  font-size: 16px;
}
 
/* 子元素将自动继承这些样式 */

优先级：

当同一个元素被多个选择器目标时，就会发生样式冲突。CSS通过一个优先级系统来确定应用哪个样式。

1. 内联样式（行内样式）style属性。
2. 内部样式表或<style>标签中的样式规则。
3. 外部样式表文件。
4. 浏览器默认样式。

优先级遵循的规则：

• 内联样式 > 内部样式表 > 外部样式表
• 更具体的选择器（ID选择器 > 类选择器 > 标签选择器）
• 如果选择器相同，则按照代码中的顺序（就近原则）
• !important规则会提升优先级，但应谨慎使用，因为它破坏了CSS的可维护性

/* 内部样式表 */
#myDiv {
  color: red;
}
 
/* 外部样式表 */
div#myDiv {
  color: blue !important; /* 使用!important提升优先级 */
}
 
/* 内联样式 */
<div id="myDiv" style="color: green;">这是文本</div>

在这个例子中，由于内联样式的优先级最高，因此该<div>元素的文本颜色将是绿色。

注意：在实践中，我们应该尽量避免使用!important，除非是在特定情况下确实需要覆盖其他样式。优先考虑提升选择器的具体性和顺序来提升优先级。