CSS相邻兄弟选择器

时间 2019-12-09

标签 css 相邻兄弟选择器栏目 CSS 繁體版

原文原文链接

css相邻兄弟选择器：可选择紧接在另外一元素后面的元素，且两者有相同的父元素。css

　　例如：若是要增长紧接在h1元素后出现的段落的上边距：spa

　　　　h1 + p { margin-top:50px;}

　　与 “+” 选择器很是容易混淆的是 “~”选择器：该选择器的做用是查找某一个指定元素后面的全部兄弟节点。code

具体例子以下：blog

HTML：
<body>
    <div class="box">
        <h1>标题</h1>
        <p class="p1">段落一的文字</p>
        <p class="p2">段落二的文字</p>
        <p class="p3">段落三的文字</p>
        <p class="p4">段落四的文字</p>
    </div>
</body>

当css代码以下时：class

.box h1 + p {color:red;}

获得的页面样式：im

当css的代码为：样式

.box h1 ~ p {color:red;}

获得的页面样式为：margin