CSS 組合選擇器

2022-09-04 16:57:15 字數 562 閱讀 6145

1、後代選擇器(包括兒子和孫子)

.c1 .c2

2、子代選擇器(只選擇兒子)

.c3 > .c5

3、與選擇器

選擇p標籤下面的.c1的標籤:

p.c1

4、或選擇器(同時選擇)

p.c1,#i1

5、兄弟選擇器

(1)相鄰兄弟選擇器

相鄰兄弟選擇器用於匹配某個元素之後緊鄰的另乙個元素,這兩個元素擁有同乙個父級元素並且不存在巢狀關係。相鄰兄弟選擇器的定義需要用到加號+,加號兩邊為相鄰的兩個元素,選擇器會匹配加號後面的元素。

h1 + p

(2)通用兄弟選擇器

通用兄弟選擇器與相鄰兄弟選擇器非常相似,但卻沒有那麼嚴格。通用兄弟選擇器同樣會匹配同一父級元素下的兄弟元素,但兄弟元素之間無需緊鄰。定義通用兄弟選擇器需要用到波浪號~,波浪號兩邊為同一父級元素下的兩個元素,選擇器會匹配波浪號後面的元素。

h1 ∼ p

CSS組合選擇器全

在 css3 中包含了四種組合方式 後代選取器 以空格分隔 子元素選擇器 以大於號分隔 相鄰兄弟選擇器 以加號分隔 普通兄弟選擇器 以波浪號分隔 後代選擇器所謂後代,就是乙個元素包含在另乙個元素裡面,例如 這裡p就是div的後代 後代選擇器匹配所有指定元素的後代元素。div p選取所有在div裡面的...

5 CSS組合選擇器

組合選擇器 把基本選擇器通過特殊符號串在一起,串起來之後能帶來一些特定的意義。組合選擇器中主要需要掌握的有4個 1 分組選擇器 格式 選擇器1,選擇器2,選擇器3 意義 使用 將多個基本選擇器連在一起,表示 這些選擇器 所對應的元素 都使用這個宣告中的樣式。2 巢狀選擇器 格式 選擇器1 選擇器2 ...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...