css选择相邻的前一个元素

作者：System 时间：2024年08月18日分类：所有,css 字数：478

在CSS中，选择相邻的前一个元素可以使用+相邻兄弟选择器。这个选择器选择所有紧接在另一个元素后的元素，且二者有相同的父元素。

例如，如果你想要选择所有紧接在<h2>元素后的第一个<p>元素，你可以这样写：




h2 + p {
  color: red;
}

这段CSS会将紧跟在<h2>元素后的第一个<p>元素的文本颜色设置为红色。如果在<h2>和它后面的<p>元素之间有其他元素，比如一个<div>，那么这个<p>不会被选中。

示例HTML代码：




<h2>标题</h2>
<p>这是一个段落，文本颜色会变为红色。</p>
<div>这是一个div，不会影响后面的p元素。</div>
<p>这个段落不会变色，因为它不是紧跟在h2后面的第一个p元素。</p>
<h2>另一个标题</h2>
<p>这个段落也不会变色，因为它不是第一个。</p>

在这个例子中，只有紧接在第一个<h2>元素后的<p>元素会被选中。