如何使用 CSS 选择器根据另一个元素的状态选择 DOM 元素？

根据CSS中的状态关系选择元素

问题：根据指定选择DOM中的其他元素元素的状态。

条件选择：

• 使用简单选择器表示状态（例如，div、[data-status~=finished]）。
• 使用组合器表达结构关系以形成复杂的选择器.
• 使目标元素成为复合体的主题

当前限制：

不幸的是，使用当前的 CSS 选择器无法满足这些条件，因为：

• 缺少父选择器（以目标对象的祖先为目标）元素）
• 缺少前一个同级选择器（以目标元素之前的同级选择器）

即将推出的功能：

即将推出的 CSS Selectors 4 标准引入了解决这些问题的功能限制：

• :matches() 伪类： 对多个复合选择器进行分组。
• :has() 伪类：选择包含与 a 匹配的子元素的元素

解决示例问题：

使用 :has() 和 :matches()，我们可以解决 CSS 选择器 4 中的示例问题：

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin) {
  /* styles for targeted elements */
}

替代方法JavaScript:

虽然并非所有浏览器都支持这些功能，但您当前可以使用 JavaScript 使用 :has():

$('section:has(> div[data-status~=finished]) + section > div').filter('.blink, .spin').css('color', 'red');

以上是如何使用 CSS 选择器根据另一个元素的状态选择 DOM 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！