众所周知，CSS 一直以来都无法直接根据父元素的子元素来选择父元素。多年来，开发者一直强烈要求实现此功能。:has() 选择器现已获得所有主流浏览器的支持，可解决此问题。在 :has() 之前，您通常会链接长选择器或添加类作为样式钩子。现在，您可以根据元素与其后代的关系来设置样式。如需详细了解 :has() 选择器，请参阅 CSS Wrapped 2023 和 5 CSS snippets every frontend developer should know。
虽然此选择器看起来很小，但它可实现大量使用情形。本文展示了电子商务公司通过 :has() 选择器实现的一些用例。
不妨查看本文所属的完整系列，了解电子商务公司如何使用新的 CSS 和界面功能来增强其网站。
Policybazaar
借助
:has()选择器，我们能够消除基于 JavaScript 的用户选择验证，并将其替换为 CSS 解决方案，该解决方案可无缝运行，并提供与之前相同的体验。—Aman Soni，Policybazaar 技术主管
Policybazaar 的投资团队巧妙地应用了 :has() 选择器，为比较方案的用户提供了清晰的视觉指示。下图显示了比较界面中的两种方案（黄色和蓝色）。每个方案只能与其自身类型进行比较。通过使用 :has()，当用户选择一种方案类型时，无法再选择另一种方案类型。
:has() 以设置父元素及其子元素的样式，从而创建与类别绑定的选择功能。代码
:has() 可让您访问父元素及其子元素的样式。以下代码用于检查父容器是否设置了 .disabled-group 类。如果存在，则卡片会灰显，并且通过将 pointer-events 设置为 none 来阻止“添加”按钮响应点击操作。
.plan-group-container:has(.disabled-group) {
opacity: 0.5;
filter: grayscale(100%);
}
.plan-group-container:has(.disabled-section) .button {
pointer-events: none;
border-color: #B5B5B5;
color: var(--text-primary-38-color);
background: var(--input-border-color);
}
Policybazaar 的 health 团队实现了略有不同的使用情形。它们包含面向用户的内嵌测验，并使用 :has() 检查问题复选框状态，以确定问题是否已回答。如果回答正确，系统会应用动画来过渡到下一个问题。
代码
在方案比较示例中，:has() 用于检查是否存在某个类。您还可以使用 :has(input:checked) 检查输入元素（例如复选框）的状态。在显示测验的视觉效果中，紫色横幅中的每个问题都是一个复选框。Policybazaar 会检查问题是否已使用 :has(input:checked) 回答，如果已回答，则使用 animation: quesSlideOut 0.3s 0.3s linear forwards 触发动画以滑动到下一个问题。请参阅以下代码，了解其运作方式。
.segment_banner__wrap__questions {
position: relative;
animation: quesSlideIn 0.3s linear forwards;
}
.segment_banner__wrap__questions:has(input:checked) {
animation: quesSlideOut 0.3s 0.3s linear forwards;
}
@keyframes quesSlideIn {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes quesSlideOut {
from {
transform: translateX(0px);
opacity: 1;
}
to {
transform: translateX(-50px);
opacity: 0;
}
}
Tokopedia
如果商品缩略图包含视频，Tokopedia 会使用 :has() 创建叠加图片。如果商品缩略图包含 .playIcon 类，则会添加 CSS 叠加层。在此示例中，:has() 选择器与 .thumbnailWrapper 类（适用于所有缩略图）中的 & 嵌套选择器一起使用。这样可以创建更模块化、更易读的 CSS。
:has() 前后的对比图。代码
以下代码使用 CSS 选择器和组合器（& 和 >）以及 :has() 的嵌套来设置缩略图的样式。对于不支持的浏览器，系统会使用常规的附加 CSS 类规则作为后备方案。@supports selector(:has(*)) 规则还用于检查浏览器支持情况。因此，无论使用哪个浏览器版本，整体体验都相同。
export const thumbnailWrapper = css`
padding: 0;
margin-right: 7px;
border: none;
outline: none;
background: transparent;
> div {
width: 64px;
height: 64px;
overflow: hidden;
cursor: pointer;
border-color: ;
position: relative;
border: 2px solid ${NN0};
border-radius: 8px;
transition: border-color 0.25s;
&.active {
border-color: ${GN500};
}
@supports selector(:has(*)) {
&:has(.playIcon) {
&::after {
content: '';
display: block;
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
& > .playIcon {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
text-align: center;
z-index: 1;
}
}
`;
使用 :has() 时需要考虑的事项
将 :has() 与其他选择器结合使用，可创建更复杂的条件。如需查看一些示例，请参阅 has() 系列选择器。
资源：
- CSS Wrapped 2023
- :has()：系列选择器
- 演示：has()
- 您想报告 bug 还是请求提供新功能？我们期待您的反馈！
不妨浏览本系列中的其他文章，了解电子商务公司如何受益于使用新的 CSS 和界面功能，例如滚动驱动的动画、视图过渡、弹出式窗口和容器查询。