:is伪类选择器嵌套疑问：为何目标段落被选中？

为什么段落会被选中 #

你的选择器 .main :is(section p) 的匹配逻辑和你理解的不一样：

• 空格是后代选择器，作用是选中.main元素的所有后代元素
• :is(section p) 是将括号内的选择器作为整体匹配，这里section p指的是「所有属于某个section元素后代的p元素」

结合你的HTML结构，<p>是带.main类的<section>的后代，同时它本身就是该<section>的子元素，完全满足section p的匹配条件，所以自然会被选中。

如果你想实现「.main元素的后代section里的p」这个逻辑，应该把.main放进:is()里，写成 :is(.main section) p，这样就只会匹配.main后代的section中的p了。

:is()选择器的预期使用场景 #

:is()主要用来简化CSS选择器的书写，减少冗余代码：

• 合并同类前缀选择器：比如原本要写 header p, footer p, aside p，可以简化为 :is(header, footer, aside) p
• 统一复杂选择器的优先级：:is()内的选择器会取其中优先级最高的那个，比如 :is(.foo, #bar) p 的优先级等同于 #bar p
• 简化嵌套选择器：比如 .container .title, .container .content 可以写成 .container :is(.title, .content)

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