只需使用添加CSS類的多個元素

Question

我創建了一個叫做「按鈕」 CSS類並將其應用到我所有的INPUT標記：

.button input 
{ 
//css stuff here 
} 

<p class="button"> 
<input type="submit" Name='submit' value="Confirm Selection"/> 
</p> 

，工作正常，但後來我加了另一個按鈕，但這不是我的表單的一部分，它只是一個與javascript相關的佔位符，並打開了一個iFrame。正如我希望它看起來與我使用同一班級的所有「真實」按鈕一樣。

<p class="button" id="AddCustomer"> 
<a href="AddCustomer.php">Add Customer</a> 
</p> 

我的問題是，如果我離開班級爲.button input的<a>標籤沒看出來。如果我刪除了input部分的CSS，我的所有按鈕在中間都有灰色方塊。

所以我.button input,a

解決呢？這工作得很好。 。 。直到我看了另一個頁面，發現我所有的<a>標籤現在都使用「按鈕」類進行了格式化，即使它們沒有應用此類。

我的問題是，我怎麼能同時申請相同的CSS類<input>和<a>標籤，但只有當我明確添加class="button"。

Answer 1

你需要有資格選擇的a部分太：

.button input, .button a { 
    //css stuff here 
} 

基本上，當您使用逗號來創建group of selectors，每一個人選擇是完全獨立的。他們之間沒有任何關係。

您的原始選擇器因此匹配「類型'輸入'的所有元素，它們是類名爲'button'的元素的後代，以及類型'a'」的所有元素。

Answer 2

.button input, 
.button a { 
    ... 
} 

Answer 3

嘗試使用：

.button input, .button a { 
    // css stuff 
} 

此外，在CSS讀了。

編輯：如果是我，我會將按鈕類添加到元素，而不是父標記。 像這樣：

HTML：

<a href="#" class='button'>BUTTON TEXT</a> 
<input type="submit" class='button' value='buttontext' /> 

CSS：

.button { 
    // css stuff 
} 

對於特定的CSS的東西使用：

input.button { 
    // css stuff 
} 
a.button { 
    // css stuff 
} 

Answer 4

試試這個：

.button input, .button a { 
//css here 
} 

這會將樣式應用於嵌套在內部的所有標籤<p class="button"></p>