JavaScript中CSS.supports()方法语法及selector(:has(:focus))含义咨询

一、CSS.supports()的语法规则 #

这个方法有两种使用形式：

• 属性值校验：CSS.supports(属性名, 属性值)，比如CSS.supports('display', 'flex')，用来检查浏览器是否支持某CSS属性的特定取值。
• 条件表达式校验：CSS.supports(条件字符串)，这里的条件可以是媒体查询、selector()函数这类合法的CSS条件，用来验证更复杂的语法支持性。

二、selector()函数的作用 #

selector()是CSS.supports()专属的检测函数，专门用来验证浏览器是否支持某个CSS选择器的语法。只要浏览器能识别你传入的选择器，这个函数就会返回true，反之则返回false。

三、selector(:has(:focus))的含义拆解 #

把这个表达式拆成三层看就懂了：

1. 最内层的:focus是基础伪类，指当前获取焦点的元素，所有现代浏览器都支持它。
2. 中间的:has(:focus)是:has()伪类的用法，意思是“包含至少一个获得焦点的子/后代元素的父元素”。
3. 整个selector(:has(:focus))就是让CSS.supports()去检查：浏览器是否支持:has(:focus)这个选择器——本质是检测:has()伪类本身的支持性，毕竟:focus是通用支持的，所以核心是验证:has()能不能用。

四、为什么简化代码会返回false？ #

如果你直接写CSS.supports(':has(:focus)')，这是错误的用法：:has(:focus)是选择器，不是“属性-值”对，也不是合法的条件表达式，必须用selector()把它包裹起来，CSS.supports()才能正确识别这是在检测选择器支持性。如果写法不对，方法会直接返回false。

额外提示 #

Firefox默认没开启:has()伪类，需要在about:config里打开layout.css.has-selector.enabled开关，此时CSS.supports("selector(:has(:focus))")才会返回true，和你测试的结果一致。

内容的提问来源于stack exchange，提问作者Manngo