如何用CSS选择父元素而非嵌套的同类型子元素？

可行的单一选择器方案 #

可以通过 q:not(q q) 选择器直接选中页面中的顶级<q>元素，它的作用是匹配所有不是<q>元素后代的<q>，完美避开嵌套的<q>。这样只需给顶级<q>设置font-size:2em，嵌套的<q>不会被该选择器匹配，也就不会触发二次放大（避免em相对单位导致的嵌套元素字体翻倍问题）。

修改后的完整代码如下：

html, body {
    height: 100%;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
q {
    quotes: "„" "”" "‚" "‘";
}
/* 仅给顶级<q>设置放大字体 */
q:not(q q) {
    font-size: 2em;
}

为什么你的尝试未生效 #

• q:has(:not(q))：这个选择器会选中所有包含非<q>后代的<q>，不管是顶级还是嵌套的<q>（只要内部有文本或其他非<q>元素都会被命中），导致所有<q>都被放大，不符合需求。
• q:has(q), q:has(:not(q))：该组合等价于选中所有<q>元素（任何<q>要么包含<q>后代，要么不包含），自然也会把嵌套的<q>纳入放大范围。

补充说明 #

如果你的需求是让嵌套的<q>字体大小和页面默认文本完全一致（而非继承顶级<q>的2em），仅靠单一选择器无法实现——因为嵌套的<q>会继承父元素（顶级<q>）的字体大小，此时必须添加q q { font-size: initial; }这类重置规则来覆盖继承值。

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