Web培训
400-996-5531
web开发中CSS 相邻兄弟选择器
- 发布：Web前端培训
- 来源：网络
- 时间：2018-06-15 17:52
这篇文章讲述了web开发中CSS 相邻兄弟选择器，本篇文章在达内web培训课程中也是有提到过的，那小编今天做了一个整理分析给大家!
CSS 相邻兄弟选择器
CSS 子元素选择器
CSS 伪类
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素，且二者有相同父元素。
选择相邻兄弟
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器(Adjacent sibling selector)。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
亲自试一试
语法解释
相邻兄弟选择器使用了加号(+)，即相邻兄弟结合符(Adjacent sibling combinator)。
注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。
请看下面这个文档树片段：
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。
请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
亲自试一试
结合其他选择器
相邻兄弟结合符还可以结合其他结合符：
html > body table + ul {margin-top:20px;}
这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
以上就是本篇内容的全部了，这一篇web开发中CSS 框模型概述希望可以对各位web开发者来说启到帮助。更多关于web教程、web培训类相关知识请关注web培训官网，也欢迎各位新生or大牛莅临达内线下课堂互动交流!
免责声明：内容和图片源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容
预约申请免费试听课
填写下面表单即可预约申请免费试听！ 怕学不会？助教全程陪读，随时解惑！担心就业？一地学习，可全国推荐就业！
上一篇：web开发中CSS 子元素选择器
下一篇：web开发中HTML 字符实体
Copyright © Tedu.cn All Rights Reserved 京ICP备08000853号-56 
京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有