所有非输入字段的 CSS 选择器

Question

我正在尝试在我的 CSS 中为正文下的所有非输入字段应用自定义字体(顺便说一句，我使用的是 SASS)。我怎么做？这不起作用:

body {
    &:not(input,select,textarea) { 
        font-family:'Roboto', sans-serif; 
    }
}

编辑

我最初发布这个问题是因为我怀疑(错误地)输入字段继承了主体的字体样式。一般情况并非如此。但是，我使用的是 Twitter Bootstrap框架，事实证明他们已经在输入字段上设置了 font-family:inherit;(这迫使他们继承在 body 元素上设置的字体)。

Answer 1

我可能应该在这个答案前加上一个注释，通常没有必要——而且不是一个好主意——将 font-family 样式应用于 body 的每个后代，因为大多数元素默认情况下都会继承字体属性(如果我没记错的话，表单元素和表格除外)。

通过将 font-family 强行应用到 body 的每个后代，即 body *，你有效地阻止了所有的继承后代，即使您尝试在其中一个上设置不同的字体系列以期望其后代继承。

应该将 font-family 样式应用于 body 并允许其后代有机地继承它(并且可能做与单独的选择器或规则集中的表元素相同)。正如我所提到的，您试图排除的表单元素，即 input,select,textarea，无论如何在大多数浏览器中都不会默认继承字体。

也就是说，您的 SCSS 不起作用的原因是 :not() 不接受 CSS 中的选择器列表。这是 jQuery 的一个特性。引用我自己对 this question 的回答:

First and foremost, to answer the question directly: you can't pass a comma-separated selector list. For example, while the given selector works in jQuery as demonstrated in the fiddle, it isn't valid CSS3:

/* If it's not in the Α, Β or Γ sectors, it's unassigned */
#sectors > div:not(.alpha, .beta, .gamma)

Is there a workaround for this if I really want to avoid relying on a script?

谢天谢地，在这种情况下，有。您只需要一个接一个地链接多个 :not() 选择器，以使其成为有效的 CSS3:

#sectors > div:not(.alpha):not(.beta):not(.gamma)

因此，您的问题的解决方案是链接多个 :not() 选择器:

body {
    :not(input):not(select):not(textarea) { 
        font-family:'Roboto', sans-serif; 
    }
}

请注意，我在这里没有使用 & 组合子。此 SCSS 将编译为以下 CSS，其中 body 后面的空格是后代组合符，:not() 表示除被排除元素之外的任何元素:

body :not(input):not(select):not(textarea) { 
    font-family: 'Roboto', sans-serif; 
}

使用 & 将导致 :not() 选择器直接附加到 body 上:

body:not(input):not(select):not(textarea) { 
    font-family: 'Roboto', sans-serif; 
}

这意味着您将匹配 body，而不是它的任何后代。它也是一个毫无用处的冗长选择器，因为 body 元素永远不能是 input、select 或 文本区域。但是，同样，您不妨继续将此声明应用于 body。除非绝对必要，否则应避免将继承的声明应用于所有元素。