首页 > CSS中的邻近选择器~一般在什么情况下使用?

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

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;
}

ulp 的同级元素的时候,p 的颜色就变咯。最简单的用处。

【热门文章】
【热门文章】