CSS下一个元素

在CSS中，通过使用下一个相邻选择器（Next Adjacent Selector）可以选择某个元素的下一个元素，并且只有当它们是相邻的兄弟元素时才会应用样式。

下一个相邻选择器使用“+”符号来表示，在选择器中，首先选择一个元素，然后使用“+”符号紧随其后，再跟上要选择的下一个元素的选择器。

语法

element1 + element2 {
  /* CSS样式 */
}

element1: 要选择的元素
+: 下一个相邻选择器符号，表示选择紧邻element1后的下一个元素
element2: 要选择的下一个元素

示例

让我们通过一个简单的示例来看看如何使用CSS下一个元素选择器。假设我们有一个HTML结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS下一个元素示例</title>
<style>
    .item {
        background-color: #f0f0f0;
        padding: 10px;
        margin-bottom: 10px;
    }

    .item + p {
        color: red;
        font-weight: bold;
    }
</style>
</head>
<body>
    <div class="item">第一个div</div>
    <p>紧邻第一个div的段落</p>
    <div class="item">第二个div</div>
    <p>紧邻第二个div的段落</p>
</body>
</html>

在上面的示例中，我们定义了两个类为item的<div>元素，并在它们后面分别紧跟着一个<p>元素。我们使用下一个相邻选择器.item + p来选择紧邻.item元素后的<p>元素，并将其文字颜色设置为红色，加粗显示。