兄弟選擇符(E~F)

E~F { sRules }

• 需要注意的是，選擇的只是同級的元素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 都會變成紅色；

• 淺綠 = 支持
• 紅色 = 不支持
• 粉色 = 部分支持

1. 在Android Browser4.2.*及以下，偽元素:checked與該選擇符一起使用會有一個bug，查看詳情。