本示例是 一個 波浪~選擇器 的例子，效果在代碼後面。
The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.
語法：
element ~ element { style properties }
例如：
p ~ span {
color: red;
}
代碼如下：<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>何問起</title>
<meta charset="utf-8" />
<style>
p ~ span {
color: red;
}
span {
background-color: #ccc;
}
</style>
</head>
<body>
<span>前邊 第一個p 何問起</span>
<span>This is not red.</span>
<p>
Here is a paragraph.
第一個 p元素
</p><span>何問起 第一個p 後邊</span>
<code>Here is some code.</code>
<span>And here is a span. 第一個p 後面 span hovertree.com</span>
<p>第2個p 元素 <a href="http://hovertree.com">何問起</a></p>
<span> 第一個p 後面 span</span>
</body>
</html>
效果:
前邊 第一個p 何問起
This is not red.
Here is a paragraph.
第一個 p元素
何問起 第一個p 後邊
Here is some code.
And here is a span. 第一個p 後面 span hovertree.com
第2個p 元素 何問起
第一個p 後面 span
參考：https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors