html小总结:邻接选择器

相对于并集选择器,交集选择器,邻接选择用的并不多,但在特殊的情景下还是蛮实用的.通过案例很轻易的理解它的用法.

案例:

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).其实很容易的,也许是我说复杂了吧,表达能力明显不行,屌丝都这样..