CSS 如何根据同级元素的属性选择性地定位元素？

CSS 如何根据另一个元素的状态选择元素

根据 DOM 中其他元素的状态识别和定位元素可能具有挑战性。由于组合器和选择器语法的限制，CSS 选择器提供的选项有限。虽然可以应用一些基本技术，包括父子关系和伪类的使用，但某些场景需要更高级的解决方案。

当前实现的限制

当前标准选择器 3 缺乏父选择器或前一个同级选择器等基本功能。这些功能将极大地扩展 CSS 构建和定位元素的能力。无法指定选择器的主题也带来了限制。

即将推出的 Selectors 4 的潜力

即将推出的 Selectors 4 标准旨在解决这些限制。 :has() 伪类受 jQuery 功能的启发，提供了灵活的解决方案。 :has() 允许根据父元素中是否存在其他元素来选择元素。

解决问题

问题中提出的示例问题，其中需要基于另一个元素的数据状态属性来定位元素，可以使用选择器中的 :has() 来解决4:

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin)

此选择器通过使用 :has() 选择包含具有指定数据状态的子 div 的部分，然后定位与.blink 或 .spin 类。

以上是CSS 如何根据同级元素的属性选择性地定位元素？的详细内容。更多信息请关注PHP中文网其他相关文章！