ul ~ p {
color: red;
}
X ~ Y 将选取 X 元素后出现的所有同级元素。上面这段代码将选取 ul 元素后出现的所有同级 p 元素。
这个神奇的选择器感觉很难用到啊?有谁用过吗?为什么用?
原生的checkbox控件太难看?用CSS实现一套免JS的checkbox:
http://jsfiddle.net/usbqdxkh/
这个方案里用到了~
。由于checkbox和状态指示的.status
中间夹了一个for标签,所以需要这个选择器(要不然就是+
了)。当然,挪一下文档结构就能用+
了……
那么怎样让用~
不可避免呢?后面的内容多一些不就好了嘛:
http://jsfiddle.net/usbqdxkh/1/
好,这个方案为何无法避免同级的选择器?因为自关闭标签input不可嵌套呀,如果可以嵌套就可以用常规玩法,后代选择器来做一些了~
这是我唯一能想到的案例=w=
一般在高级浏览器里用。
~~~~~~~~~~~~~~~
为了怕有人看不懂,(目前,只能呵呵。)
p {
color: blue;
}
ul ~ p {
color: red;
}
有 ul
是 p
的同级元素的时候,p
的颜色就变咯。最简单的用处。