同级兄弟元素之间的CSS控制

同级兄弟元素之间的CSS控制

为了实现这个导航效果:选中菜单中某一项,隐藏掉自身的左边背景线条,同时让他的下一个兄弟元素也隐藏掉线条。

有一种选择器就叫兄弟元素选择器,分为临近兄弟和普通兄弟。

临近兄弟:用 + 表示,只匹配该元素后边的第一个同级元素。
普通兄弟:用 ~ 表示,匹配该元素后边的所有同级元素。

给个例子:

<style>
div#aa { }
div#aa p { font-size: 14px; color: #000; }
div#aa p.on { color: #f00; }
div#aa p.on ~ span { color: #00f; }
div#aa p.on + span { color: #0f0; font-weight: bold; }
</style> <div id="aa">
<p class="on">sdf</p>
<span>sdf</span>
<span>sdf</span>
</div>

当把p的class设为on的时候,span的样式也跟着改变。

上一篇:datagridview随窗体的大小而变,表格填满控件


下一篇:生成器的throw和close方法