如何用单行CSS选择器匹配([myattr=a]||[myattr=b])&&[secondattr=s]的元素？

没问题，完全可以用单行CSS选择器实现你要的([myattr=a] || [myattr=b]) && [secondattr=s]复合匹配逻辑，下面给你详细说明：

1. 基础单行实现（兼容所有现代浏览器） #

直接用逗号分隔“或”条件，同时用连写属性选择器实现“且”条件，就能精准匹配目标元素：

.parentclass .another[myattr="a"][secondattr="s"], .parentclass .another[myattr="b"][secondattr="s"]

这个选择器的逻辑是：

• 第一部分：选中.parentclass下的.another元素，要求myattr="a"并且secondattr="s"
• 第二部分：选中.parentclass下的.another元素，要求myattr="b"并且secondattr="s"
• 逗号表示“或”，所以整体就是匹配满足两个条件之一的元素，完全符合你的需求。

2. 用:is()伪类简化写法（适合多值场景） #

考虑到你提到secondattr有s到w共5种值，重复写长长的类名太繁琐，推荐使用CSS的:is()伪类来简化代码，同样是单行：

.parentclass .another:is([myattr="a"], [myattr="b"]):is([secondattr="s"], [secondattr="t"], [secondattr="u"], [secondattr="v"], [secondattr="w"])

:is()可以把多个选择器打包成一个“或”组，这样你只需要写一次父类和.another，就能同时匹配所有组合条件，代码简洁易维护，目前所有现代浏览器都支持这个伪类。

3. 关于你提到的W3C文档例子的误区 #

你看到的文档里DIALOGUE[character=romeo] DIALOGUE[character=juliet]写法是错误的（大概率是文档笔误）——这里的空格是后代选择器，意思是“选择在character=romeo的DIALOGUE元素内部的character=juliet的DIALOGUE元素”，完全不是“或”的逻辑。正确的“或”写法应该是用逗号分隔：

DIALOGUE[character=romeo], DIALOGUE[character=juliet]

这才是匹配character为romeo或juliet的DIALOGUE元素，这也是你之前尝试无效的原因。

用上面的选择器测试你的示例元素：

• 会选中前两个同时满足myattr为a/b且secondattr="s"的元素
• 不会选中secondattr为空或myattr="z"的元素，完全符合你的要求。

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