所有非輸入字段的CSS選擇器

Question

我想在我的CSS中應用一個自定義字體，用於所有非輸入字段（正在使用SASS btw）。我怎麼做？這是行不通的：

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。除非絕對必要，否則應該避免將繼承的聲明應用於所有元素。