CSS選擇器的宣告與巢狀

2021-07-14 10:38:24 字數 1098 閱讀 1054

css選擇器的宣告與巢狀

使用css選擇器控制html標記的時候,每個選擇器的屬性可以一次宣告多個,選擇器本身也可以同時宣告多個。

並且,任何形式的選擇器,都是合法的,標記選擇器,class選擇器和id選擇器都可以集體宣告。

集體宣告

在宣告css選擇器時,如果某些選擇器的風格是完全相同的,或者部分相同,這時便可以使用集體宣告的方式,將風格相同的選擇器同時宣告。

集體宣告h4

集體宣告h5

集體宣告p1

集體宣告p2

集體宣告p3

全域性宣告

對於實際**中,如果希望頁面中所有的標記都使用同一種css樣式,但是,又不希望逐個來集體宣告,這是可以使用全域性宣告符號*來宣告。

集體宣告h4

集體宣告h5

集體宣告p1

集體宣告p2

集體宣告p3

可以看出兩種宣告效果完全一樣,但是,使用全域性宣告會使**大大的減少。

選擇器的巢狀

在css選擇器中,可以使用巢狀的方式,對特殊位置的html標記進行宣告。

比如,控制p標記中的b標記

巢狀使用css標記的方法

巢狀之外的標記不生效

巢狀選擇器,使用非常的廣泛,不僅只是巢狀的標記本身,類別選擇器和id選擇器都可以進行巢狀。

下面的**使用了三層巢狀,實際上更多層次的巢狀都是允許的,表示.top類別的標記中,包含的.top1類別的標記,其中包含的標記,所宣告的樣式風格。

td.top .top1 strong

其他內容css控制的部分其他內容

選擇器的巢狀,在css中可以大大減少對class和id的宣告,因此,在構建頁面的html時,通常只給外層標記定義class或者id,內層標記能通過巢狀表示的則利用巢狀的方式,從而,不需要再定義新的class或者id,只有當子標記無法利用此規則時,才進行單獨的宣告。

CSS選擇器與宣告衝突

css選擇器有,元素選擇器 id選擇器 類選擇器 後代選擇器 子元素選擇器 相鄰兄弟選擇器 通用選擇器 不相鄰兄弟 並集選擇器 群組選擇器 萬用字元選擇器還有偽類選擇器等在這裡我i就介紹以下幾種,偽類選擇器在我的其它文章有介紹可自行檢視。1 元素選擇器就是選中相同元素定義乙個css樣式。2 id選擇...

選擇器與css

屬性 屬性是表示事物的某些特徵 屬性分為標籤屬性和樣式屬性 標籤屬性直接解除安裝標籤中,樣式屬性寫在style中 二者區別 1.位置不同 一種寫在標籤內一種寫在style 2.寫法不同 選擇器的種類有 標籤選擇器 id選擇器 class選擇器 後代選擇器 子代選擇器 交集選擇器 標籤的樣式按選擇器的...

前端 CSS巢狀方式,選擇器,iframe

1.css的三種巢狀方式 其實是四種,但是有2種是一樣的效果 css cascading style sheet 層疊樣式表 或 級聯樣式單 製作網頁時採用css技術,可以有效地對頁面布局 字型 顏色 背景和其它效果實現更加精確的控制,可以改變同一頁面的不同部分,或者頁數不同的網頁的外觀和格式。ca...