本文旨在解决CSS动画控制中，当控制元素（如按钮）位于目标元素之后时，使用Sibling Selector失效的问题。通过分析Sibling Selector的局限性，并引入`:has()`伪类，提供了一种无需JavaScript即可实现动画控制的解决方案，并附带详细代码示例和注意事项。
在使用CSS进行动画控制时，我们经常需要通过某些交互（例如按钮点击）来触发或暂停动画。 Sibling Selector (~) 是一种常用的方法，但它存在一定的局限性。 本文将深入探讨 Sibling Selector 的工作原理及其限制，并介绍如何使用 :has() 伪类来解决控制元素位于目标元素之后时动画无法生效的问题。
Sibling Selector (~) 的局限性
Sibling Selector (~) 允许你选择同一父元素下，位于指定元素之后的所有兄弟元素。 这意味着，如果你的控制元素（例如按钮）位于需要控制动画的元素之前，那么 Sibling Selector 可以正常工作。然而，如果控制元素位于目标元素之后，则 Sibling Selector 将无法生效。
以下面的HTML结构为例，展示了Sibling Selector失效的场景：
立即学习“前端免费学习笔记（深入）”；
在这种情况下，即使你使用如下的CSS规则：
.start:focus ~ .container .content {
animation-play-state: running;
}
.stop:focus ~ .container .content {
animation-play-state: paused;
}点击按钮也无法控制 .content 元素的动画，因为 .start 和 .stop 按钮位于 .container 元素之后。
使用 :has() 伪类解决问题
:has() 伪类允许你选择包含特定元素的父元素。 通过结合 :has() 伪类和子选择器 (>)，我们可以轻松地解决控制元素位于目标元素之后的问题。
首先，我们需要将目标元素和控制元素包裹在一个父元素中：
然后，使用 :has() 伪类来选择包含 .start:focus 或 .stop:focus 的 .wrapper 元素，并使用子选择器 (>) 来定位到 .container .content 元素，从而控制动画：
.wrapper:has(.start:focus) > .container .content {
animation-play-state: running;
}
.wrapper:has(.stop:focus) > .container .content {
animation-play-state: paused;
}完整的CSS代码如下：
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
.container {
margin: 50px auto;
width: 500px;
height: 500px;
border: 1px solid black;
}
.content {
width: 100px;
height: 150px;
background-color: aqua;
animation: animasyon 1.5s linear alternate infinite;
}
.wrapper:has(.start:focus) > .container .content {
animation-play-state: running;
}
.wrapper:has(.stop:focus) > .container .content {
animation-play-state: paused;
}
@keyframes animasyon {
from {
width: 100px;
}
to {
width: 500px;
}
}通过这种方式，无论控制元素位于目标元素之前还是之后，都可以使用纯CSS实现动画的控制。
总结与注意事项
- Sibling Selector (~) 的局限性： 只能选择位于指定元素之后的兄弟元素。
- :has() 伪类的优势： 可以选择包含特定元素的父元素，从而解决控制元素位置带来的问题。
- 代码结构： 为了使用 :has() 伪类，需要将目标元素和控制元素包裹在一个父元素中。
- 兼容性： 请注意 :has() 伪类的兼容性。 部分旧版本浏览器可能不支持该特性。 在使用前请务必进行兼容性测试。
通过理解 Sibling Selector 的局限性并掌握 :has() 伪类的用法，我们可以更灵活地使用 CSS 控制动画，避免使用 JavaScript，从而简化代码并提高性能。
