首頁 > web前端 > css教學 > 主體

CSS的相鄰兄弟選擇器何時用

(*-*)浩
發布: 2019-12-30 16:16:43
原創
3160 人瀏覽過

CSS的相鄰兄弟選擇器何時用

相鄰兄弟選擇器(Adjacent sibling selector)可選擇緊接在另一元素後的元素,且二者有相同父元素

選擇鄰近兄弟                  ( 建議學習:CSS教學 )

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

例如,如果要增加緊接在h1 元素後出現的段落的上邊距,可以這樣寫:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>

<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
登入後複製

這個選擇器讀作:「選擇緊接在h1 元素後出現的段落,h1 和p 元素擁有共同的父元素」。

語法解釋:

相鄰兄弟選擇器使用了加號( ),即相鄰兄弟結合符(Adjacent sibling combinator)。

註解:與子結合符一樣,相鄰兄弟結合符旁邊可以有空格符。

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

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
登入後複製

在上面的片段中,div 元素中包含兩個列表:一個無序列表,一個有序列表,每個列表都包含三個列表項目。這兩個列表是相鄰兄弟,列表項目本身也是相鄰兄弟。

不過,第一個清單中的清單項目與第二個清單中的清單項目並非相鄰兄弟,因為這兩組清單項目不屬於同一父元素(最多只能算堂兄弟)。

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

li + li {font-weight:bold;}
登入後複製

上面這個選擇器只會把清單中的第二個和第三個清單項目變成粗體。第一個列表項不受影響。

以上是CSS的相鄰兄弟選擇器何時用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板