如何在Sass中使用:has。

Question

如果 body 中有带有 .rtl 类的元素，我需要添加一些样式。如何实现呢？

body:has(.app.rtl) {
   .blah {
       some: blah;
   }
}

This is something that I need

- Reza Babaei

---

完全不可能。没有任何预处理器可以帮助你实现这个。唯一能够做到的是使用JavaScript。在CSS中无法实现的事情，当然也不能通过任何预处理器来实现。 - connexo

这个不起作用吗？你可能不需要 .app（检查同时具有 .app 和 .rtl 类的元素）。但这是正确的语法。只需确保将其放在 CSS 的末尾，以便您的属性规则覆盖预先存在的规则。 - Bryce Howitson

@connexo是正确的。我忽略了检查:has是否已经超出了草案规范。目前，没有浏览器实现它。 - Bryce Howitson

正如他们所说，这是不可能的；你需要检测它并为具有该子元素的元素添加一个类。 - Toni Michel Caubet

Answer 1

由于CSS没有父选择器，目前也没有:has选择器，因此无法使用CSS来实现您想要的效果。

SASS也无法帮助您，因为SASS只能让CSS编写更容易 - 最终任何预处理器都会将您的代码编译为CSS，而这是浏览器所理解的唯一内容。 在这里，唯一的跨浏览器解决方案仍然是Javascript。

2023年1月编辑：截至目前，Safari和基于Chromium的浏览器（Edge，Brave等）支持:has()，Firefox支持实验性Web平台功能标志后的支持。

您的样式将如下所示：

body:has(.app.rtl) .blah {
    some: blah;
}

- connexo

Answer 2

:has() CSS 伪类表示一个元素，如果传递的选择器列表（相对于给定元素的 :scope）中的任何一个选择器至少匹配一个元素。

:has() 伪类将选择器列表作为参数。在当前规范中，:has 没有标记为活动选择器配置文件的一部分，这意味着它不能在样式表中使用；只能与像 document.querySelector() 这样的函数一起使用。

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

- prajeesh webandcrafts