首页 > 代码库 > CSS ~ and +

CSS ~ and +

以前一直以为css不是怎么厉害,今天忽然发现 . . .

咳。。咳。。

以下是经过测试的哦 ^_^

当然不是那么全面啦,欢迎提意见!

ok,

~ (w3c中国没有找到)

作用:同级别下后面的

比如:

1 <span class="t">上边</span>
2 <div>
3     <span class="t">里面</span>
4 </div>
5 <span class="t">下边1号</span><br />
6 <span class="t">下边2号</span>

现在我们给他加一个样式: div~ .t{color: red;} 

那么谁会有变化呢? 没错,就是:下边1号和2号变成了红色

+

作用:同级别下紧跟着的(必须紧跟着)

如果我们把样式改为: .t~ .t{color:red;} 

谁变啦?

答案是,木有...因为没有用符合这个规则的元素链

现在,把 html 代码中的 <br/> 去掉

RUN !