如何编写只要属性存在、匹配任意属性值的CSS选择器？

存在可以匹配指定属性存在、无论取值是什么的CSS选择器，语法为[属性名]，属于CSS标准属性选择器的一种。

你尝试的:lang(*)写法无法生效，是因为:lang()伪类的入参要求为合法的语言标签，不支持通配符*来匹配所有携带lang属性的场景。

你的需求可以通过调整选择器写法实现，正确代码如下：

/* 未设置lang属性时的默认样式 */
html {
    background: white;
}

/* 匹配所有携带lang属性的html元素，优先级高于标签选择器，覆盖默认白色 */
html[lang] {
    background: green;
}

/* 匹配lang属性为en-US的场景，同优先级下书写顺序靠后，覆盖上面的绿色 */
html:lang(en-US) {
    background: red;
}

补充说明：

• [lang]选择器会命中所有带lang属性的元素，哪怕属性值为空也会匹配，如需排除空值场景，可调整为html[lang]:not([lang=""])
• 如果你需要严格匹配元素自身设置的lang属性，而非继承自父元素的lang属性，[属性名]的写法比:lang()伪类更精准

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