CSS 样式优先级
CSS样式的优先级基于几个主要因素：
- 内联样式（在HTML元素的
style属性中） - 内部样式表或
<style>标签（在HTML文档中） - 外部样式表（通过
<link>标签引入的CSS文件） - 浏览器默认样式
优先级顺序：内联样式 > 内部样式表 > 外部样式表。
如果在同一个样式源中有多个规则应用到同一个元素，或者通过多个选择器选中了同一个元素，则最具体的规则将会被应用。最具体的规则是指：
- 具有ID选择器的规则 > 类选择器 > 标签选择器
- 直接选中元素的选择器 > 继承的选择器 > 继承的选择器
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
/* 内部样式表，类选择器 */
.red-text {
color: red;
}
</style>
<link href="styles.css" rel="stylesheet">
<!-- 外部样式表可能会覆盖内部样式表中的相同规则 -->
</head>
<body>
<p class="red-text" style="color: blue;">这段文字是蓝色的，因为内联样式具有最高优先级。</p>
<p class="red-text">这段文字是红色的，因为它在内部样式表中定义。</p>
</body>
</html>在这个例子中，外部样式表中的规则可能会覆盖内部样式表中的.red-text类的规则，但内部样式表总是优先于外部样式表。而内联样式因为在HTML标签中直接定义，具有最高优先级，会覆盖任何其他形式的样式。
评论已关闭