69 lines
1.3 KiB
Markdown
69 lines
1.3 KiB
Markdown
---
|
||
title: Override Class Declarations by Styling ID Attributes
|
||
localeTitle: 通过样式ID属性覆盖类声明
|
||
---
|
||
## 通过样式ID属性覆盖类声明
|
||
|
||
为了理解CSS中的覆盖，首先必须了解CSS中的优先原则。
|
||
|
||
要记住的关键规则是从底部到顶部读取CSS。
|
||
|
||
一个例子是：
|
||
|
||
```html
|
||
|
||
<style>
|
||
body {
|
||
background-color: black;
|
||
font-family: Arial;
|
||
color: black;
|
||
}
|
||
.red-text {
|
||
color: red;
|
||
}
|
||
.blue-text {
|
||
color: blue;
|
||
}
|
||
</style>
|
||
<h1 class="red-text blue-text">Example</h1>
|
||
```
|
||
|
||
在上面的示例中，文本`Example`将为蓝色，因为最后添加的类是`blue-text` 。
|
||
|
||
**记住`id`属性优先于类，这意味着它排名最高是关键。**
|
||
|
||
您可以通过在类的名称前面添加`#`来创建`id`属性，如下所示：
|
||
|
||
```html
|
||
|
||
<style>
|
||
#purple-text {
|
||
color: purple;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
下面是一个示例，向您展示如何**通过样式ID属性覆盖类声明** ：
|
||
|
||
```html
|
||
|
||
<style>
|
||
body {
|
||
background-color: black;
|
||
font-family: Arial;
|
||
color: black;
|
||
}
|
||
.red-text {
|
||
color: red;
|
||
}
|
||
.blue-text {
|
||
color: blue;
|
||
}
|
||
#green-color {
|
||
color: green;
|
||
}
|
||
</style>
|
||
<h1 id="green-color" class="red-text blue-text">Example</h1>
|
||
```
|
||
|
||
这将使文本`Example`为绿色，因为`id`属性将始终优先于`class`声明。 |