當(dāng)前位置：首頁 > news >正文

網(wǎng)站建設(shè)品牌好app拉新推廣平臺(tái)

news 2025/7/4 21:12:25

網(wǎng)站建設(shè)品牌好,app拉新推廣平臺(tái),自己創(chuàng)做網(wǎng)站,做汽車團(tuán)購網(wǎng)站1 復(fù)合選擇器定義：由兩個(gè)或多個(gè)基礎(chǔ)選擇器通過不同的方式組合而成。作用：更準(zhǔn)確、更高效的選擇目標(biāo)元素（標(biāo)簽） 1.1 后代選擇器后代選擇器：會(huì)同時(shí)選中某元素的所有后代元素后代選擇器寫法：父選擇器子…

1 復(fù)合選擇器

定義：由兩個(gè)或多個(gè)基礎(chǔ)選擇器通過不同的方式組合而成。
作用：更準(zhǔn)確、更高效的選擇目標(biāo)元素（標(biāo)簽）

1.1 后代選擇器

后代選擇器：會(huì)同時(shí)選中某元素的所有后代元素
后代選擇器寫法：父選擇器子選擇器 { CSS 屬性 }，父子選擇器之間用空格隔開。

1.2 子代選擇器

子代選擇器：選中某元素的子代元素（最近的子級(jí)）。
選擇器寫法：父選擇器 > 子選擇器器{CSS屬性}，父子選擇器之間用 > 隔開。

1.3 并集選擇器

并集選擇器：選中多組標(biāo)簽設(shè)置相同的樣式。
選擇器寫法：選擇器1，選擇器2，.,選擇器N{CSS屬性}，選擇器之間用，隔開。

1.4 交集選擇器? 了解

交集選擇器：選中同時(shí)滿足多個(gè)條件的元素。
選擇器寫法：選擇器1選擇器2{CSS屬性}，選擇器之間連寫，沒有任何符號(hào)。

1.5 偽類選擇器

偽類選擇器：偽類表示元素狀態(tài)，選中元素的某個(gè)狀態(tài)設(shè)置樣式。

鼠標(biāo)懸停狀態(tài)：選擇器:hover{CSS屬性}

例如：鼠標(biāo)劃過的狀態(tài)

1.5.1 偽類 - 超鏈接? 一般不用

超鏈接一共有四個(gè)狀態(tài)：

提示：如果要給超鏈接設(shè)置以上四個(gè)狀態(tài)，需要按 LVHA 的順序書寫。

注意：工作中，一般就只寫 a { CSS 屬性}，以及 a:hover{ CSS 屬性

2 CSS 三大特性

2.1 繼承性

繼承性：子級(jí)默認(rèn)繼承父級(jí)的文字控制屬性
注意：當(dāng)標(biāo)簽有自己的樣式，就不會(huì)繼承父級(jí)的

一般會(huì)在 body 標(biāo)簽中統(tǒng)一設(shè)置，對(duì)于特殊的字體再單獨(dú)寫

2.2 層疊性

相同的屬性會(huì)覆蓋：后面的 CSS 屬性覆蓋前面的CSS屬性
不同的屬性會(huì)疊加：不同的 CSS 屬性都生效

2.3 優(yōu)先級(jí)

優(yōu)先級(jí)：也叫權(quán)重，當(dāng)一個(gè)標(biāo)簽使用了多種選擇器時(shí)，基于不同種類的選擇器的匹配規(guī)則。
在屬性后邊加 !important 是直接提高到最高優(yōu)先級(jí)? ?慎用！

比如：

規(guī)則：選擇器優(yōu)先級(jí)高的樣式生效
公式：通配符選擇器<標(biāo)簽選擇器<類選擇器<id選擇器<行內(nèi)樣式<!important
選中標(biāo)簽的范圍越大，優(yōu)先級(jí)越低

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性：優(yōu)先級(jí)</title><style>/* 通配符選擇器 */* {color: red !important;       /*  在屬性后邊加 !important 是直接提高到最高優(yōu)先級(jí) */}/* 標(biāo)簽選擇器 */div {color: green;}/* 類選擇器 */.box {color: blue;}/* id 選擇器 */#test {color: orange;}</style>
</head>
<body><!-- 行內(nèi)樣式：style="color:purple" --><div class="box" id="test" style="color:purple">div 標(biāo)簽</div>
</body>
</html>