CSS 相邻同级组合器 ( ) 如何工作？

了解 CSS 相邻同级组合器：

在 CSS 中，该符号称为相邻同级组合器。它允许您定位彼此相邻的特定 HTML 元素。

组合器如何工作？

组合器确保目标元素（第二个选择器中的第一个元素）必须紧跟在第一个元素（选择器中的第一个元素）之后。选择器匹配的两个元素之间不应有其他元素。

示例：h2 p

考虑以下 CSS 规则：

<code class="css">h2 + p {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
}</code>

此规则针对与 h2 元素相邻的所有 p 元素。换句话说，它只会影响紧接在 h2 元素之后出现的 p 元素。

说明

以以下 HTML 代码为例：

<code class="html"><h2>Headline!</h2>
<p>The first paragraph.</p> <!-- Selected -->
<p>The second paragraph.</p> <!-- Not selected -->

<h2>Another headline!</h2>
<blockquote>
    <p>A quotation.</p> <!-- Not selected -->
</blockquote></code>

h2 p 选择器只会选择第一个 p 元素，因为它与 h2 相邻。第二个 p 元素未被选择，因为它通过

与 h2 分开。块引用中的 p 元素也不会被选择，因为在同一块中没有紧邻其前面的 h2 元素。

与一般兄弟组合器的区别 ~

与组合器，一般兄弟组合器~不需要相邻放置。它选择兄弟元素，无论它们之间的相对位置如何。

以上是CSS 相邻同级组合器 ( ) 如何工作？的详细内容。更多信息请关注PHP中文网其他相关文章！