相鄰選擇符(E+F)

語法:

E+F { sRules }

說明:

選擇緊貼在E元素之後F元素,元素E與F必須同屬一個父級。
  • 兄弟選擇符(E~F) 相同的是,相鄰選擇符也是選擇同級的元素F;不同的是,相鄰選擇符只會命中符合條件的那個毗鄰的兄弟元素(即緊挨著E元素之後的第一個F元素)。

    E~F VS. E+F:

    <style> /* 相鄰選擇符(E+F) */ h3 + p { color: #f00; } /* 兄弟選擇符(E~F) */ h3 ~ p { color: #f00; } </style> <h3>這是一個標題</h3> <p>p1</p> <p>p2</p> <p>p3</p>

    這個例子中,如果是相鄰選擇符,那麼只有 p1 會變成紅色;如果是兄弟選擇符,那麼 p1/p2/p3 都會變成紅色;

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
7.0+

示例: