所有非输入字段的 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的回答：

首先，直接回答问题：不能传递逗号分隔的选择器列表。例如，虽然给定的选择器在 jQuery 中工作，如小提琴所示，但它不是有效的 CSS3：

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

如果我真的想避免依赖脚本，是否有解决方法？

谢天谢地，在这种情况下，有。您只需一个接一个地链接多个 :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()s 代表除被排除元素之外的任何元素：

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 或textarea。但是，同样，您不妨继续将此声明应用于body。除非绝对必要，否则应避免将继承的声明应用于所有元素。