编辑“︁CSS has伪类”︁

{{DISPLAYTITLE:CSS:has伪类}}

'''CSS <code>:has()</code>伪类'''是CSS选择器Level 4规范中引入的一种功能强大的关系选择器，允许开发者根据子元素或后续兄弟元素的存在来匹配父元素。它填补了传统CSS选择器无法"向上选择"的空白，为样式控制提供了更灵活的解决方案。

== 基本概念 ==
<code>:has()</code>伪类被称为"父选择器"或"关系选择器"，它允许选择包含特定子元素或满足特定内部关系的元素。其语法结构为：

<syntaxhighlight lang="css">
父元素:has(子元素选择器) {
   /* 样式规则 */
}
</syntaxhighlight>

传统CSS选择器只能向下选择（从父到子），而<code>:has()</code>实现了逆向选择的能力。例如，可以选择"包含.active类子元素的<div>"，这在以前只能通过JavaScript实现。

== 浏览器兼容性 ==
截至2023年，<code>:has()</code>已获得现代浏览器的广泛支持：
* Chrome 105+
* Safari 15.4+
* Firefox 121+
* Edge 105+

对于不支持的环境，需要使用JavaScript作为替代方案或渐进增强策略。

== 基本用法示例 ==
=== 选择包含特定子元素的父元素 ===
<syntaxhighlight lang="css">
/* 选择包含<img>子元素的<article> */
article:has(img) {
  border: 2px solid blue;
}

/* 选择包含类名为.highlight的<p>的<section> */
section:has(p.highlight) {
  background-color: yellow;
}
</syntaxhighlight>

=== 组合使用示例 ===
<syntaxhighlight lang="css">
/* 选择包含至少一个<li>和<h2>的<div> */
div:has(li):has(h2) {
  padding: 1em;
}

/* 选择不包含<p>的<div> */
div:not(:has(p)) {
  opacity: 0.8;
}
</code>
</syntaxhighlight>

== 高级应用场景 ==
=== 表单验证样式 ===
可以根据输入框的状态动态调整表单容器的样式：

<syntaxhighlight lang="css">
/* 当包含无效输入时标记表单组 */
.form-group:has(:invalid) {
  border-left: 3px solid red;
}

/* 当复选框被选中时改变容器样式 */
.fieldset:has(input[type="checkbox"]:checked) {
  background-color: #f0f8ff;
}
</syntaxhighlight>

=== 响应式布局调整 ===
可以根据内容的存在调整布局：

<syntaxhighlight lang="css">
/* 如果卡片包含图片，则使用弹性布局 */
.card:has(.card-image) {
  display: flex;
  gap: 1rem;
}

/* 表格中有特定列时调整宽度 */
table:has(td.numeric) {
  table-layout: fixed;
}
</syntaxhighlight>

=== 复杂嵌套选择 ===
<mermaid>
graph TD
    A[div] --> B[h2]
    A --> C[p.special]
    D[div] --> E[h2]
    D --> F[p.normal]
</mermaid>

<syntaxhighlight lang="css">
/* 选择同时包含h2和p.special的div */
div:has(h2):has(p.special) {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</syntaxhighlight>

== 性能考虑 ==
<code>:has()</code>选择器是CSS中最昂贵的操作之一，因为它需要浏览器检查每个候选元素的所有后代。使用时应注意：

1. 避免在页面的关键渲染路径中过度使用
2. 尽量缩小选择器范围（如使用<code>div.content:has(...)</code>而非<code>:has(...)</code>）
3. 在动态内容中谨慎使用，因为DOM变化会触发重新计算

== 数学关系选择 ==
结合CSS数学比较函数可以实现更复杂的选择：

<math>
\mbox{选择包含至少3个<li>的<ul>}: \quad \mathtt{ul:has(li:nth-of-type(3))}
</math>

<syntaxhighlight lang="css">
/* 选择包含超过5个项目的列表 */
ul:has(li:nth-of-type(5)) {
  column-count: 2;
}
</syntaxhighlight>

== 实际案例研究 ==
=== 动态表格行高亮 ===
当表格行中的单元格包含特定内容时高亮整行：

<syntaxhighlight lang="css">
tr:has(td:contains("紧急")) {
  background-color: #ffdddd;
  font-weight: bold;
}

tr:has(td:empty)) {
  opacity: 0.6;
}
</syntaxhighlight>

=== 导航菜单当前项指示 ===
根据页面内容动态标记导航菜单中的当前项：

<syntaxhighlight lang="css">
/* 当子菜单包含.active项时 */
nav li:has(ul .active) {
  border-left: 3px solid var(--active-color);
}

/* 标记包含当前页链接的菜单项 */
.menu-item:has(a[href="/current-page"])) {
  font-weight: bold;
}
</syntaxhighlight>

== 限制与注意事项 ==
1. 不能用于样式表中（只能用于选择器）
2. 伪元素不作为<code>:has()</code>的匹配目标
3. 在复杂文档中可能影响性能
4. 目前不能嵌套使用（如<code>:has(:has(...))</code>）
5. 某些旧版浏览器需要前缀或polyfill

== 替代方案 ==
对于不支持<code>:has()</code>的环境，可以考虑：

1. 使用JavaScript添加特定类名
2. 调整HTML结构使传统选择器可用
3. 使用CSS变量和兄弟选择器组合

== 总结 ==
<code>:has()</code>伪类代表了CSS选择能力的重大进步，使开发者能够基于内容关系创建更智能、更动态的样式系统。虽然需要谨慎使用以避免性能问题，但它为解决传统CSS的限制提供了强大的工具。随着浏览器支持的普及，<code>:has()</code>有望成为现代CSS工作流中的标准组成部分。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS高级选择器]]