多個元素的CSS選擇器問題

我以爲我的CSS已經相當好了，但我似乎無法弄清楚爲什麼會出現這個問題。我一定做錯了什麼。多個元素的CSS選擇器問題

所以，如果我要選擇那些孩子們一個div多個元素我可以這樣寫：

#mydiv > input, label{ 

}

，對嗎？我認爲這是真實的，直到我意識到我的網站中的其他輸入和標籤繼承了這些CSS屬性，即使它們不在名爲#mydiv的div中。要解決我不得不使用的問題：

#mydiv > input, #mydiv > label { 

}

但我確信這不是最快的方法。我試着在W3.org上檢查Selector Page，但他們沒有舉例說明我的情況。

我在做什麼錯？

來源

2012-08-06 Matt Hintzke

我對嗎？

號The grouping selector（逗號）優先級最低，所以你不能用它來選擇是使用這個選擇一個div的兒童多種元素：

#mydiv > input, label

最簡潔的選擇是一個你對自己的發現：

#mydiv > input, #mydiv > label

您可以使用嵌套規則DRY了一點東西在LESS或Sass，儘管這會在您的代碼和/或構建過程中引入依賴關係。

來源

2012-08-06 17:06:14

真的。好吧，非常感謝很多 – 2012-08-06 17:07:18

請參閱我的編輯，順便說一句。 – 2012-08-06 17:14:19

我可以使用沒有紅寶石的sass嗎？我的僱主通常不喜歡使用紅寶石。不要問爲什麼..lol – 2012-08-06 17:16:16

您的第二個片段是使用純CSS完成它的最簡單方法。逗號,分隔孤立的CSS選擇器，所以這就是爲什麼你需要爲每個選擇器都開始#mydiv。

你可以使用類似LESS的東西，這將允許nested rules。非密切相關的例子：

#header { 
    h1 { 
    font-size: 26px; 
    font-weight: bold; 
    } 
    p { font-size: 12px; 
    a { text-decoration: none; 
     &:hover { border-width: 1px } 
    } 
    } 
}

但是，你可能更好的純粹的CSS。

來源

2012-08-06 17:06:30

你的第二個方法是好的

#mydiv > input, #mydiv > label { 

}

如果你想以某種方式做到這一點，而不使用由逗號分隔的多個選擇，你可以爲您的輸入和標籤元素使用一個類名

.your-class-name { 

}

或者如果由於某種原因輸入和標籤是#mydiv的唯一兩種子元素，那麼您可以使用如下通用選擇器：

#mydiv > * { 

}

#mydiv > * { 

}

來源

2012-08-06 17:12:06

多個元素的CSS選擇器問題

回答

相關問題