CSS組合選擇器全

在 css3 中包含了四種組合方式:

後代選取器(以空格分隔)

子元素選擇器(以大於號分隔）

相鄰兄弟選擇器（以加號分隔）

普通兄弟選擇器（以波浪號分隔）

後代選擇器

所謂後代，就是乙個元素包含在另乙個元素裡面，例如

這裡p就是div的後代

後代選擇器匹配所有指定元素的後代元素。

div p選取所有在div裡面的p，不管是子元素還是孫元素。

子元素選擇器就是後代選擇器的特例，一定要是直接後代才行，如果是孫輩以下的就不行

div>p

可以被選擇，是直接後代

不可以被選擇。不是直接後代

可選擇緊接在另一元素後的元素，且二者有相同父元素。（只能選擇之後的第乙個兄弟）

如果需要選擇緊接在另乙個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（adjacent sibling selector）。

div+p

1、brother

可以被選擇

2、brother

不可以被選擇,我前面有個span，不是相鄰的兄弟節點了

3、brother

我可以被選擇

我不能被選擇了，我是第二個p

普通兄弟選擇器選取所有指定元素的相鄰兄弟元素。

只要是有相同父親元素的所有之後兄弟元素都會被選取，不管是否相鄰

w3c普通相鄰兄弟選擇器例項

CSS 組合選擇器

1 後代選擇器 包括兒子和孫子 c1 c2 2 子代選擇器 只選擇兒子 c3 c5 3 與選擇器 選擇p標籤下面的.c1的標籤 p.c1 4 或選擇器 同時選擇 p.c1,i1 5 兄弟選擇器 1 相鄰兄弟選擇器 相鄰兄弟選擇器用於匹配某個元素之後緊鄰的另乙個元素，這兩個元素擁有同乙個父級元素並且不...

5 CSS組合選擇器

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

css選擇器 CSS選擇器總結

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