根目录
除了!important 声明，还有哪些方法可以覆盖外部样式表的样式？
除了使用`!important`声明外，还有以下方法可以覆盖外部样式表的样式：
一、提高选择器特异性
1. 更具体的选择器
- 如果外部样式表中使用了较通用的选择器，如`p`（选择所有`<p>`标签），在内部样式表中可以使用更具体的选择器来覆盖其样式。例如，使用`.classname p`（选择具有特定类的元素内的`<p>`标签）或`#id p`（选择具有特定 ID 的元素内的`<p>`标签）。
- 示例：
- 外部样式表：
css
p {
color: blue;
}- 内部样式表：
html
<head>
<style>
.specific-class p {
color: red;
}
</style>
</head>- HTML 结构：
html
<p>这是一个普通段落。</p> <div class="specific-class"> <p>这是特定类中的段落。</p> </div>
具有特定类“specific-class”的`<div>`中的`<p>`标签会显示为红色，因为内部样式表中更具体的选择器覆盖了外部样式表中通用的`<p>`选择器。
2. 增加选择器层级
- 通过增加选择器的层级，可以提高其特异性，从而覆盖外部样式表的样式。例如，`div p`（选择`<div>`元素内的`<p>`标签）可以改为`div.container p`（选择具有类“container”的`<div>`元素内的`<p>`标签）。
- 示例：
- 外部样式表：
css
div p {
font-size: 14px;
}- 内部样式表：
html
<head>
<style>
div.specific-container p {
font-size: 16px;
}
</style>
</head>- HTML 结构：
html
<div> <p>这是普通<div>中的段落。</p> </div> <div class="specific-container"> <p>这是特定容器中的段落。</p> </div>
具有类“specific-container”的`<div>`中的`<p>`标签会显示为16像素字号，因为内部样式表中增加了选择器层级，提高了特异性。
二、使用内联样式
直接在 HTML 元素上使用`style`属性定义的内联样式具有最高的优先级，可以覆盖外部样式表和内部样式表的样式。
示例：
html
<p style="color: green;">这是具有内联样式的段落。</p>
即使外部样式表和内部样式表都定义了`<p>`标签的样式，这个段落也会显示为内联样式指定的绿色，因为内联样式优先级最高。