[分享]css兄弟选择器用法

发布于 2024-11-11 15:45:28

CSS中的兄弟选择器允许您选择一个元素的兄弟元素，这些兄弟元素必须紧随该元素。以下代码示例说明兄弟选择器的使用：p + p { color: red; } 该选择器将选择p元素之后的下一个p元素，...

CSS中的兄弟选择器允许您选择一个元素的兄弟元素，这些兄弟元素必须紧随该元素。以下代码示例说明兄弟选择器的使用：

p + p {
  color: red;
}

该选择器将选择p元素之后的下一个p元素，并将其文本颜色设为红色。这意味着一个段落可以被更改为红色的同时，下一个段落可以保持默认颜色不变。以下示例说明：

<html>
<head>
  <style>
    p + p {
      color: red;
    }
  </style>
</head>
<body>
  <p>这是一个段落。</p>
  <p>这是另一个段落。</p>
  <p>这是第三个段落。</p>
  <p>这是最后一个段落。</p>
</body>
</html>

在上述代码示例中，第一个p元素不受选择器影响，第二个p元素将文本颜色更改为红色，而第三个和第四个p元素不受选择器影响。兄弟选择器也可以与其他选择器组合使用，例如：

h2 ~ p {
  font-weight: bold;
}

这个选择器将选择h2元素后的所有p元素，将它们的字体加粗。需要注意的是，兄弟选择器只作用于下一个兄弟元素，如果需要选择多个兄弟元素，可以使用相邻兄弟选择器。例如：

h2 + p {
  font-weight: bold;
}

这个选择器将选择h2元素下一个p元素，并将其字体加粗。

css 教程

一个月内的热帖推荐

91云脑

Lv.1普通用户

62849 帖子	14 小组	291 积分

62849

帖子

小组

291

积分

关注作者

发帖	回复	分享

赞助商广告

本组热帖