通用兄弟選擇器,位置無須緊鄰,只須同層級,A~B 選擇A元素之后所有同層級B元素。
設置同一父元素下的 p 元素之后的每一個 span 元素的字體顏色:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(cainiaoplus.com)</title>
<style>
p ~ span {
color: red;
}
</style>
</head>
<body>
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>
</body>
</html>測試看看 ?/?former_element ~ target_element { style properties }element1~element2 選擇器匹配出現(xiàn)在 element1 后面的 element2。
element1 和 element2 這兩種元素必須具有相同的父元素,但 element2 不必緊跟在 element1 的后面。
IEFirefoxOperaChromeSafari
所有主流瀏覽器都支持 element1~element2 選擇器。
注意:要想在 IE8 及其更早版本中使用這個選擇器,必須聲明 <!DOCTYPE>。