兄弟和序選擇器

2021-09-29 05:39:02 字數 968 閱讀 3540

兄弟選擇器

1.相鄰兄弟選擇器 css2

作用: 給指定選擇器後面緊跟的那個選擇器選中的標籤設定屬性

格式:選擇器1+選擇器2

注意點:

1.相鄰兄弟選擇器必須通過+連線

2.相鄰兄弟選擇器只能選中緊跟其後的那個標籤, 不能選中被隔開的標籤

2.通用兄弟選擇器 css3

作用: 給指定選擇器後面的所有選擇器選中的所有標籤設定屬性

格式:選擇器1~選擇器2

注意點:

1.通用兄弟選擇器必須用~連線

2.通用兄弟選擇器選中的是指定選擇器後面某個選擇器選中的所有標籤, 無論有沒有被隔開都可以選中

序選擇器

css3中新增的選擇器最具代表性的就是序選擇器

1.同級別的第幾個

:first-child 選中同級別中的第乙個標籤

:last-child 選中同級別中的最後乙個標籤

:nth-child(n) 選中同級別中的第n個標籤

:nth-last-child(n) 選中同級別中的倒數第n個標籤

:only-child 選中父元素中唯一的標籤

注意點: 不區分型別

2.同型別的第幾個

:first-of-type 選中同級別中同型別的第乙個標籤

:last-of-type 選中同級別中同型別的最後乙個標籤

:nth-of-type(n) 選中同級別中同型別的第n個標籤

:nth-last-of-type(n) 選中同級別中同型別的倒數第n個標籤

:only-of-type 選中父元素中唯一型別的某個標籤

:nth-child(odd) 選中同級別中的所有奇數

:nth-child(even) 選中同級別中的所有偶數

:nth-child(xn+y)

x和y是使用者自定義的, 而n是乙個計數器, 從0開始遞增

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

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