和 (兄弟選擇器)

2021-08-21 15:20:33 字數 800 閱讀 9757

1. + 選擇器

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

比如:

this is paragraph.

this is paragraph.

this is paragraph.

效果如圖: 

兄弟只會印象下面的p標籤的樣式,不影響上面兄弟的樣式。 

注意這裡的』+』的意義跟』and』意義不一樣,兄弟選擇器的樣式是應用在兄弟元素上,跟參照的元素樣式無關,如上例只影響p元素的樣式,而不影響h1標籤的樣式。 

當然這個也會迴圈查詢,即當兩個兄弟元素相同時,會一次迴圈查詢: 

示例: 

效果: 

可以看出第乙個li字型顏色沒有變紅,第二個和第三個元素字型變紅,這就是因為第三個li是第二個li的兄弟元素,所以也會應用樣式。

2. ~ 選擇器 

作用是查詢某乙個指定元素的後面的所有兄弟結點。 

示例**: 

執行結果: 

兄弟選擇器和相鄰兄弟選擇器

1 兄弟選擇器 brother selector,bs bs是css3.0新增的乙個選擇器,語法格式 a b a b為html元素 標籤,表示a標籤匹配selector的a,b標籤匹配selector的b時,b標籤匹配樣式 hello word hello word hello word hello...

兄弟選擇器 和

1.選擇器 如果需要選擇緊接在另乙個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器。比如 this is paragraph.this is paragraph.this is paragraph.效果如圖 兄弟只會印象下面的p標籤的樣式,不影響上面兄弟的樣式。注意這裡的 的意義跟 a...

兄弟選擇器

相鄰兄弟選擇器 格式 標籤1 標籤2 1.標籤1下面的,所有的名字叫做標籤2的兄弟級別的標籤都會被改變和修飾。2.標籤1下面的,id名或class類名或標籤名叫做標籤2的標籤會被修飾。3.通用兄弟選擇器不單單只改變相鄰的兄弟標籤,只要是下面的 相對而言 而且滿足條件的,都會被查詢到,然後進行修飾。例...