CSS中的邻近选择器~一般在什么情况下使用？

Question

ul ~ p {  
  color: red;
}

X ~ Y 将选取 X 元素后出现的所有同级元素。上面这段代码将选取 ul 元素后出现的所有同级 p 元素。
这个神奇的选择器感觉很难用到啊？有谁用过吗？为什么用？

Answer 1

原生的checkbox控件太难看？用CSS实现一套免JS的checkbox：

http://jsfiddle.net/usbqdxkh/

这个方案里用到了~。由于checkbox和状态指示的.status中间夹了一个for标签，所以需要这个选择器（要不然就是+了）。当然，挪一下文档结构就能用+了……

那么怎样让用~不可避免呢？后面的内容多一些不就好了嘛：

http://jsfiddle.net/usbqdxkh/1/

好，这个方案为何无法避免同级的选择器？因为自关闭标签input不可嵌套呀，如果可以嵌套就可以用常规玩法，后代选择器来做一些了～

这是我唯一能想到的案例=w=

Answer 2

p {
  color: blue;
}

ul ~ p {
  color: red;
}

有 ul 是 p 的同级元素的时候，p 的颜色就变咯。最简单的用处。

Answer 3

一般在高级浏览器里用。

～～～～～～～～～～～～～～～
为了怕有人看不懂，（目前，只能呵呵。）