兄弟選擇符(E~F)

語法:

E~F { sRules }

說明:

選擇E元素後面的所有兄弟元素F,元素E與F必須同屬一個父級。
  • 需要注意的是,選擇的只是同級的元素F,後代中的元素F不會被選擇。

    只作用於同級元素

    <style> h3 ~ p { color: #f00; } </style> <h3>這是一個標題</h3> <p>p1</p> <div> <p>p2</p> <p>p3</p> </div>

    這個例子中,只有 p1 會被選中;p2/p3 由於與 h3 並不是同級,所以不會被選中;

  • 只選擇E元素之後的元素F,出現在E元素之前的元素F,不會被選擇到。

    只作用於同級元素

    <style> h3 ~ p { color: #f00; } </style> <p>p0</p> <h3>這是一個標題</h3> <p>p1</p> <p>p2</p> <p>p3</p>

    這個例子中,p1/p2/p3 都會被選中;而 p0 因為在 h3 之前,所以不會被選中;

  • 相鄰選擇符(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+ #1 18.0+
7.0+
  1. Android Browser4.2.*及以下,偽元素:checked與該選擇符一起使用會有一個bug,查看明細

示例: