如何仅当相邻兄弟元素存在时应用 CSS 样式-html教程-PHP中文网

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

如何仅当相邻兄弟元素存在时应用 CSS 样式

CSS :has() 伪类配合相邻兄弟选择器（+）可实现“仅当后续元素存在时才对当前元素应用样式”，无需 JavaScript，兼容现代浏览器（Chrome 105+、Safari 15.4+、Firefox 121+）。

css `:has()` 伪类配合相邻兄弟选择器（`+`）可实现“仅当后续元素存在时才对当前元素应用样式”，无需 javascript，兼容现代浏览器（chrome 105+、safari 15.4+、firefox 121+）。

在传统 CSS 中，我们无法“向前”选择或基于后续元素状态影响前序元素——直到 :has() 的出现彻底改变了这一限制。:has() 是一个父选择器（subject selector），允许你根据子元素或兄弟元素的存在与状态，反向定位并样式化其祖先或前置兄弟元素。

要实现“仅当紧邻的 .div2 存在时，才为 .div1 设置红色背景”，正确写法如下：

.div1:has(+ .div2) {
  background-color: red;
}

✅ 生效条件：仅当 .div1 后面紧邻（next sibling） 且同级（same parent） 的元素是 .div2 时，该规则才匹配。
❌ 不生效场景：

.div2 被其他元素隔开（如

）→ 不匹配；
.div2 不存在或位于不同层级（如嵌套在 .div1 内部）→ 不匹配；
浏览器不支持 :has()（如旧版 Edge、IE 或低于 Chrome 105 的版本）→ 规则被忽略（安全降级）。

? 实用扩展示例：
你想让导航项 .nav-item 在其后有下拉菜单 .dropdown 时显示下划线和箭头：

<a href="#" class="nav-item">产品</a>
<div class="dropdown">...</div>
<a href="#" class="nav-item">关于我们</a>
<!-- 无后续 dropdown → 不加样式 -->

.nav-item:has(+ .dropdown) {
  position: relative;
  text-decoration: underline;
}
.nav-item:has(+ .dropdown)::after {
  content: "▼";
  font-size: 0.7em;
  margin-left: 4px;
}

⚠️ 注意事项：

:has() 不可用于 CSS 动画关键帧或 @keyframes 中；
当前不能在 @supports 中检测 :has() 支持性（需通过特性查询工具或 JS 特性检测兜底）；
性能敏感场景（如大量动态 DOM）中，过度嵌套 :has() 可能影响渲染性能，建议保持选择器简洁（如避免 .container:has(> div:has(+ p)) 多层嵌套）。

总结：:has(+ selector) 是现代 CSS 实现“条件式兄弟依赖样式”的标准方案，语义清晰、原生高效。在确保目标浏览器支持的前提下，它已可替代多数轻量级 JS DOM 检测逻辑，让样式逻辑真正回归 CSS 层。