了解 CSS 兄弟选择器：初学者指南

CSS 提供了多种选择器来定位 HTML 文档中的特定元素。虽然类和 ID 选择器很常用，但它们并不总是根据元素与其他元素的关系来定位元素。这就是 CSS 同级选择器发挥作用的地方。

CSS 同级选择器对于创建复杂且灵活的 Web 布局至关重要，它允许您根据元素与其他元素的相对位置来设置元素的样式。当设计取决于元素放置并使用各种组合器（例如后代组合器、子组合器、相邻同级组合器等）时，它们特别有用。这种方法允许您将样式应用于特定元素，而无需添加额外的类或 ID，从而减少代码混乱。

什么是 CSS 兄弟选择器？

CSS同级选择器用于选择同级元素（共享相同的父元素），即，它可以帮助您根据与共享相同父元素的其他元素的关系来选择 HTML 元素。这些组合符是独特的符号，可以帮助浏览器理解 HTML 元素之间的关系。

CSS 同级选择器有两种类型：

• 相邻兄弟选择器 ( )

• 通用兄弟选择器 (-)

这就是 CSS 同级选择器对于 Web 开发人员至关重要的原因：

• 增强的特异性：与通用选择器相比，同级选择器允许更精确的元素样式。这增强了 CSS 代码的可维护性和组织性。

• 动态布局：通过关注项目相对于兄弟项目的位置，您可以开发适应内容结构的布局。想象一下容器的第一个和最后一个子元素的样式不同。

• 视觉关系：它使您能够在项目之间创建视觉关系。考虑突出显示标题，后跟相应的图像或在相邻部分之间添加边框。

• 减少代码重复：当您需要根据元素在特定容器中的位置设置元素样式时，兄弟选择器可以消除重复的类分配的需要，从而使代码更清晰。

• 效率：它可以通过最小化冗余来提高 CSS 效率。兄弟选择器允许您编写简单、可重用的适应文档结构的 CSS 规则，而不是编写许多规则来针对不同条件下的某些项目。

• 响应式设计：它在响应式网页设计中非常方便。它们允许您根据项目与其他项目的关系来调整项目的布局或外观，这对于在多种设备和屏幕尺寸上提供一致的用户体验至关重要。

CSS 同级选择器允许您超越纯粹基于元素的样式方法。它们使您能够利用 HTML 的层次结构来产生更加一致且视觉上令人愉悦的用户体验。

CSS 兄弟选择器的类型

CSS 兄弟选择器有两种类型：相邻选择器和通用选择器。两者对于允许开发人员根据兄弟关系定位元素都很重要，但它们的操作方式不同。

上图显示了 CSS 中的同级选择器以及它们如何定位元素。

相邻兄弟选择器 ( )

相邻同级选择器由加号 ( ) 表示，允许您将具有相同父元素的另一个元素定位到紧邻的元素之后。这意味着它只会定位直接出现在指定元素之后的第一个同级元素，从而允许精确且上下文敏感的样式，而无需额外的类或 ID。

此选择器提供了高精度，允许您根据元素在 HTML 结构中的确切位置来设置元素的样式。

语法：

    element1 + element2 {
      /* CSS styles */
    }

在此语法中：

• element1：表示目标元素之前的元素。

• element2：表示要设置样式的元素，必须直接跟在 element1 后面。

• 加号（ ）：作为组合符，表示元素之间的特定关系。

用途：

如前所述，此选择器的目标元素是紧跟在另一个指定元素之后的元素。当您根据其直接兄弟元素设置元素样式时，这非常有用。

• 设置表单元素的样式：当用户关注输入字段时，您可能希望突出显示紧随其后的标签。

    input:focus + label {
      color: blue;
    }

• 内容格式：您可以对标题后面的段落应用特殊格式。

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

示例：LambdaTest 博客页面

让我们考虑 LambdaTest 博客页面中的一个示例来展示相邻同级选择器的使用。

让我们分解使用相邻同级选择器的不同实例：

    element1 + element2 {
      /* CSS styles */
    }

它的目标是列表项 (

) 紧接在类 .platform 的元素之后。在导航菜单中，此规则定位具有类 .enterprise 的元素（紧接在 .platform 之后），并使用 position:relative 进行样式设置。这允许使用绝对定位来定位 .enterprise 元素内的下拉菜单。

    input:focus + label {
      color: blue;
    }

它的目标是紧邻类 .login 的按钮之后的按钮元素。它专门为第二个按钮设置样式（填充、边框等），在登录按钮和后续按钮之间创建不同的视觉区别。

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

它的目标是紧邻具有类 .button-container 的元素之后的搜索输入容器元素。它设置搜索输入容器的样式（宽度、定位等）。

    .platform + li {
        position: relative;
    }

这是一个略有不同的用例。在这里，相邻同级选择器的目标是 .search-icon * 元素，但仅当 *.search-input 元素具有焦点时（当用户在搜索栏中单击时）。这样，您可以更改图标的颜色和大小，以便在与搜索输入交互时向用户提供视觉反馈。

通用兄弟选择器 (~)

通用同级选择器，由波浪号 (~) 表示，允许您定位和设置共享相同父级并跟随指定元素的元素的样式。与仅针对直接兄弟的相邻兄弟选择器不同，一般兄弟选择器影响所有后续兄弟。

语法：

一般兄弟选择器的语法是：

    .login + button {
        padding: 12px 15px;
        border: none;
        border-radius: 0.25rem;
        cursor: pointer;
        background: #eee;
    }

在此语法中：

• **element1：**代表参考元素。

• element2：表示目标元素，该元素紧随 element1 并共享同一父元素。

当您设计与 HTML 结构相关但不一定彼此相邻的组件时，通用同级选择器非常方便。例如，您可以使用它来设置

HTML 标记元素后面的所有段落的样式，即使它们之间还有其他元素。

用途：

通用同级选择器针对指定元素的所有共享同一个父元素的同级元素，无论其位置如何。

• 导航链接：使用通用同级选择器来设置突出显示链接后面的任何导航链接的样式。

    element1 + element2 {
      /* CSS styles */
    }

• 列表样式：如果您想为特定列表项之后的所有列表项设置样式，请使用通用同级选择器。

    input:focus + label {
      color: blue;
    }

• 主题部分： 对文档中同一父级中特定部分之后的所有部分应用不同的样式。

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

示例：LambdaTest 文档页面

在 LambdaTest 文档页面示例中，通用同级选择器对 .docs-category 部分中 .docs-title div 后面的所有 元素进行样式设置。这种方法有助于区分链接与其他内容并创建结构化布局。它确保所有相关链接在视觉上分组和样式一致，保持干净和有组织的设计。

在上面的示例中，CSS 规则 .docs-title ~ a * 定位 .docs-title div 之后的所有 *anchor () 元素。使用的样式包括块显示、间距边距以及特定的文本颜色、大小和粗细。

了解这两个同级选择器可以在您的网页上提供更有针对性和动态的样式。然而，CSS 同级选择器是否与所有浏览器兼容？

浏览器兼容性

带有组合器的 CSS 同级选择器在现代浏览器中得到广泛支持，包括 Chrome、Firefox、Safari 和 Edge。但是，检查与旧浏览器版本的兼容性并在不同浏览器上测试您的网站以确保行为一致仍然是一个很好的做法。

要在各种浏览器上测试您的网站样式并确保一切按预期运行，请考虑使用 LambdaTest 等基于云的平台。它是一个人工智能驱动的测试执行平台，允许您在 3000 种浏览器和操作系统组合上大规模运行手动和自动浏览器兼容性测试。

最佳实践和注意事项

使用 CSS 同级选择器可以极大地增强您的网站设计。尽管如此，遵循最佳实践并了解某些注意事项对于确保 CSS 样式表保持高效和可维护非常重要。

组合选择器以实现特异性

CSS 同级选择器提供的特异性低于类和 ID。这意味着，如果存在具有较高特异性的冲突样式规则，则更具体的规则优先。注意冲突并确保您的同级选择器样式针对正确的组件。

同级选择可以与其他 CSS 选择器结合使用，以提高特异性并防止冲突。这可以防止在不需要的情况下应用样式。

    element1 + element2 {
      /* CSS styles */
    }

避免过度使用同级选择器

过度使用同级选择器会使 CSS 更难以阅读和管理。尝试简化和澄清样式表，使它们更容易理解。考虑使用类或嵌套项来实现更复杂的定位场景。

    input:focus + label {
      color: blue;
    }

限制选择器的范围

避免使用过于宽泛的选择器，这可能会无意中设置比预期更多的元素。例如，使用 .nav-item ~ .nav-item 而不是 div ~ div 以确保仅定位相关元素。

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

确保响应性和兼容性

确保您的网站看起来有吸引力并且在所有设备和浏览器上正常运行至关重要。在特定上下文中使用 CSS 同级选择器时，优先考虑响应能力和广泛兼容性至关重要。

以下是一些重要的注意事项：

• **媒体查询：**使用媒体查询根据屏幕尺寸和设备方向自定义您的样式。这可确保您的网站布局适应台式机、笔记本电脑、平板电脑和智能手机上的最佳查看效果。要跨各种设备和浏览器验证响应式设计，请使用 LambdaTest 提供的 LT 浏览器。此移动网站测试工具允许您在 53 个设备视口上测试您的网站，确保在不同设备上获得一致且积极的用户体验。

下面的 CSS 媒体查询针对宽度为 992 像素或更小的屏幕的样式，通常包括处于纵向模式的平板电脑和智能手机。在此媒体查询中，您可以将正文的高度调整为自动，并将 .logo-container img 的高度设置为 40px，以及其他更改。

下面的代码片段是媒体查询的示例，它调整 992 像素宽或更小的屏幕的博客文章部分布局。它将 .blog-image-text-container * 设置为显示为具有列方向的 Flex 容器，并将其宽度调整为 100%。 *.blog-image-container * 中的图像的样式设置为宽度 100% 和高度 auto。此外，*.table-of-content *使用*display: none隐藏。

结果：

以上结果显示在 LT 浏览器上，以验证您的网站在桌面、移动和平板设备上的响应能力。

要开始使用 LT 浏览器并测试应用程序的响应能力，只需单击下面的下载按钮即可。

观看下面的视频，了解有关 LT 浏览器以及如何开始使用的更多信息。

• 浏览器兼容性：跨多个浏览器测试您的网站的功能和外观，以确保您的样式和布局呈现一致。浏览器对 CSS 代码的解释可能略有不同，因此测试有助于识别和解决不一致问题。如上所述，您可以使用 LambdaTest 执行跨浏览器测试，以验证您的网站是否受各种浏览器支持并按预期工作。

通过优先考虑响应能力和兼容性，您可以构建一个为所有用户提供无缝用户体验的网站，无论他们的设备或浏览器如何。

使用类来提高清晰度

CSS 同级选择器对于根据项目在 HTML 结构中的位置定位项目非常有用；但是，过度使用它们可能会导致代码的可维护性降低。使用类有助于提高代码可读性和长期可维护性。

想象一下您使用同级选择器的场景，例如：

    element1 + element2 {
      /* CSS styles */
    }

此代码立即定位

元素后面的所有元素。考虑一个包含许多部分的页面，其中包含

和 作为摘要。

这里使用 CSS 同级选择器变得不太清楚。如果您在特定部分的

和

*之间添加另一个元素，会发生什么？ CSS 同级选择器可能不再定位预期的 *

对于这些部分。

使用类，您可以指定元素之间的关系，使您的 CSS 代码可读且可维护。具体做法如下：

HTML：

    input:focus + label {
      color: blue;
    }

CSS：

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

在此示例中，您可以包含 .article-section、.article-title、.article-summary 等类。现在 CSS 样式针对这些特定的类，使代码更清晰易懂。使用类可以提高代码的可读性、可维护性和重用性。

采用此方法可确保您的 CSS 代码随着您网站的发展而可维护。请记住，从长远来看，清晰且组织良好的代码可以节省时间并促进与其他开发人员的协作。

结论

总之，兄弟选择器是有效的 CSS 功能，允许开发人员根据项目关系开发复杂且动态的样式。本博客重点介绍两种类型的同级选择器：相邻 ( ) 和通用 (~)。

为了演示同级选择器的实用性，我们回顾了基础知识，包括实际示例，并研究了实际应用程序。此外，我们还强调了保持 CSS 高效且易于管理的最佳实践和注意事项。

理解并正确使用相邻和通用同级选择器可以让您改进网页设计并开发更复杂、更具视觉吸引力的布局。为了获得最佳结果，请正确测试您的样式并保持代码整洁且组织良好。

编码快乐！

以上是了解 CSS 兄弟选择器：初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章！