修改

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()表示除被排除的元素之外的任何元素：

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。除非绝对必要，否则应避免将继承声明应用于所有元素。

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

修改

1 个答案: