CSS 三大特性

📢 本文由 gemini-2.5-flash 翻譯

CSS 三大特性：繼承性、層疊性、優先級

繼承性

子層級預設繼承父層級的文字控制屬性，若子層級有自己的樣式則不繼承

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<style>
    body {
        font: 30px/0.5 楷體;
        color: aqua;
    }
</style>

<body>
    <div>div</div>
    <p>p</p>
    <span>span</span>
        
    <a href="#">不繼承顏色</a>
</body>

層疊性

選擇器類型相同時：

相同的屬性會覆蓋：後面的 CSS 屬性覆蓋前面的 CSS 屬性
不同的屬性會疊加：不同的 CSS 屬性都生效

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<style>
    div {
        color: red;
        font-size: 30px;
    }
    div {
        color: aqua;
        font-weight: 700;
    }
</style>

<div>
    顏色為 aqua，字級 30px，粗體
</div>

優先級

當一個標籤使用了多種選擇器時，優先級高的樣式生效，優先級：

萬用字元選擇器 < 標籤選擇器 < 類別選擇器 < ID 選擇器 < 行內樣式 < !important

一般不使用 !important ，下例不使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<style>
    #app {
        color: orange;
    }
    .box {
        color: blue;
    }
    div {
        color: red;
    }
    * {
        color: purple;
    }
</style>

<div>標籤選擇器 red</div>
<div class="box">類別選擇器 blue</div>
<div class="box" id="app">ID 選擇器 orange</div>
<div class="box" id="app" style="color: aqua;">行內樣式 aqua</div>

使用 !important

1
2
3
4
5
6
7
<style>
    div {
        color: aqua !important;
    }
</style>

<div style="color: blue">aqua</div>

複合選擇器疊加優先級

依照 (行內樣式，ID 選擇器個數。類別選擇器個數，標籤選擇器個數) 由左至右依序比較個數，同層級個數較多的優先級較高，若相同則比較下一個層級

若有 !important 則優先級最高，繼承的優先級最低

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    /* (0, 0, 2, 1) */
    .c1 .c2 div {
        color: blue;
    }
    /* (0, 1, 0, 1) */
    div #box3 {
        color: red;
    }
    /* (0, 1, 1, 0) */
    #box1 .c3 {
        color: aqua;
    }
</style>

<div class="c1" id="box1">
    <div class="c2" id="box2">
        <div class="c3" id="box3">
            aqua
        </div>
    </div>
</div>

範例 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
    /* (0, 2, 0, 0) */
    #father #son {
        color: aqua;
    }
    /* (0, 1, 1, 1) */
    #father p.c2 {
        color: black;
    }
    /* (0, 0, 2, 2) */
    div.c1 p.c2 {
        color: red;
    }
    /* 繼承 */
    #father {
        color: blue !important;
    }
    /* 繼承 */
    div#father.c1{
        color: yellow;
    }
</style>

<div class="c1" id="father">
    <div class="c2" id="son">
        aqua
    </div>
</div>

Emmet 寫法

即程式碼的簡寫方式，輸入縮寫 VS Code 會自動產生對應的程式碼

對於 HTML

說明	Emmet	效果
類別選擇器	`標籤名.類名`	`<div class="box"></div>`
ID 選擇器	`標籤名#id名`	`<div id="app"></div>`
同層級標籤	`div+p`	`<div></div><p></p>`
父子層級標籤	`div>p`	`<div><p></p></div>`
多個相同標籤	`span*3`	`<span></span><span></span><span></span>`
有內容的標籤	`div{內容}`	`<div>內容</div>`

對於 CSS 大多為單字首字母

h500+w300+bgc 會變為

1
2
3
4
5
div {
    width: 500px;
    height: 300px;
    background-color: #fff;
}