相对于并集选择器,交集选择器,邻接选择用的并不多,但在特殊的情景下还是蛮实用的.通过案例很轻易的理解它的用法.
案例:
css:
body ul li+li {
color:red;
}
html:
<ul>
<li>这是第一个li</li>
<li>这是第一个li</li>
<li>这是第一个li</li>
<li>这是第一个li</li>
<li>这是第一个li</li>
</ul>
效果:
可以看见第二个li标签中的文字全部都是红色的了,也就是说li+li就表示指定第二个li标签后的元素属性.下面我们再来看一个例子:
css:
body ul li+li {
color:red;
}
body ul li+li+li{
color:blue;
}
html:
<ul>
<li>这是第一个li</li>
<li>这是第一个li</li>
<li>这是第一个li</li>
<li>这是第一个li</li>
<li>这是第一个li</li>
</ul>
效果:
这时候我们发现从第3个li标签开始,标签中的文字变成蓝色的了,也就是我们指定第3个标签的结果(li+li+li).其实很容易的,也许是我说复杂了吧,表达能力明显不行,屌丝都这样..