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

2021-08-17 15:08:39 字數 750 閱讀 3618

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 word!

hello word!

hello word!

效果如下圖所示:

2.相鄰兄弟選擇器(adjacent sibling selector)可選擇緊接在另乙個元素後的元素,且二者具有相同的父親元素。相鄰兄弟選擇器使用了加號(+),即相鄰兄弟結合符(adjacent sibling combinator)。注釋:

與子結合符一樣,相鄰兄弟結合符旁邊可以有空白符。

hello word!

hello word!

hello word!

hello word!

hello word!

hello word!

效果如下圖所示:

相鄰兄弟選擇器

相鄰兄弟選擇器 adjacent sibling selector 可選擇緊接在另一元素後的元素,且二者有相同父元素。相鄰兄弟選擇器使用了加號 即相鄰兄弟結合符 adjacent sibling combinator 注釋 與子結合符一樣,相鄰兄弟結合符旁邊可以有空白符。請看下面這個文件樹片段 cs...

子選擇器 相鄰兄弟選擇器

今天新學習的關於css的各種選擇器,其中子選擇器和相鄰兄弟選擇器比較重要,可以大大的減少文件中class特性的數量。下面用乙個簡單的例子介紹一下他們的用處。事例中需要表達的樣式為 第乙個段落無邊框也無背景色 所有中的段落都有邊框 最後3個段落背景色為灰色 相鄰兄弟選擇器 title 5 style ...

CSS 相鄰兄弟選擇器

相鄰兄弟選擇器 adjacent sibling selector 可選擇緊接在另一元素後的元素,且二者有相同父元素。如果需要選擇緊接在另乙個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器 adjacent sibling selector 例如,如果要增加緊接在 h1 元素後出現的段...