結合其他選擇器

2021-07-03 00:01:28 字數 555 閱讀 7954



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

請看下面這個文件樹片段:

list item 1

list item 2

list item 3

在上面的片段中,div 元素中包含兩個列表:乙個無序列表,乙個有序列表,每個列表都包含三個列表項。這兩個列表是相鄰兄弟,列表項本身也是相鄰兄弟。不過,第乙個列表中的列表項與第二個列表中的列表項不是相鄰兄弟,因為這兩組列表項不屬於同一父元素(最多只能算堂兄弟)。

請記住,用乙個結合符只能選擇兩個相鄰兄弟中的第二個元素。請看下面的選擇器:

li + li
上面這個選擇器只會把列表中的第二個和第三個列表項變為粗體。第乙個列表項不受影響。

親自試一試

相鄰兄弟結合符還可以結合其他結合符:

html > body table + ul
這個選擇器解釋為:選擇緊接在 table 元素後出現的所有兄弟 ul 元素,該 table 元素包含在乙個 body 元素中,body 元素本身是 html 元素的子元素。

CSS選擇器和其他選擇器

lang en charset utf 8 選擇器title ctrl shift 群組選擇器 box,color,span 選中ol標籤裡的li標籤 ol li ul red 直接子元素選中 box2 div 相鄰兄弟 span p 普通兄弟 span p style head box boxdi...

CSS選擇器和其他選擇器及權重

作用 css選擇器主要用來對網頁中的元素進行設定樣式 css選擇器的規範寫法 標籤名作用 根據元素的class值進行選取元素 語法 classname作用 根據元素的id屬性值選取元素 語法 id作用 可以同時使用多個選擇器,這樣可以選擇同時滿足多個選擇器的元素。語法 選擇器1選擇器2作用 可以同時...

十二,CSS其他選擇器

1,呼叫class選擇器 允許重複class選擇器名稱 定義 class imooc 慕課網p 呼叫 imooc 2,呼叫id選擇器 唯一 定義 name1 慕課網p 呼叫 name1 3,呼叫 選擇器 4,呼叫,選擇器 聯合選擇器,用逗號隔開 name1,name2 charset utf 8 d...