風格提交按鈕不同

我有一個提交按鈕，看起來特定的方式，但我想在不同的頁面上提供不同的外觀提交按鈕。我正在努力弄清楚如何改變第二個提交按鈕的樣式。風格提交按鈕不同

的HTML看起來像這樣爲第一個按鈕：

<button type="submit">Submit</button>

的CSS是這樣的：

input[type="submit"], 
button[type="submit"] { 
    height: 50px; 
    line-height: 48px; 
    border: 2px solid #47b475; 
    background: #47b475; 
    color: #fff; 
    width: 100%; 
    font-size: 11px; 
    text-transform: uppercase; 
    font-weight: bold; 
    letter-spacing: 1px; 

}

我試圖創造一些像：

.button2 { 

/*bunch of code 

}

，但我試試：

<button type="submit" class="button2">Submit</button>

而這不起作用，所以我顯然缺少一些東西。請幫忙！

感謝

來源

2016-04-23 Jonathan

你正好碰上一個CSS選擇器的特異性問題。
你需要重複input[type="submit"]您.button2課前，使之更加具體，因此覆蓋任何特異性較低風格

input[type="submit"], 
 
button[type="submit"] { 
 
    height: 50px; 
 
    line-height: 48px; 
 
    background: #47b475; 
 
    border: 2px solid #47b475; 
 
    color: #fff; 
 
    width: 100%; 
 
    font-size: 11px; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    letter-spacing: 1px; 
 
} 
 

 

 
input[type="submit"].button2, 
 
button[type="submit"].button2{ 
 

 
    background: #1CEA6E; 
 
    border: 2px solid #1CEA6E; 
 

 
}

<button type="submit">Submit</button> 
 
<button type="submit" class="button2">Submit</button>

來源

2016-04-23 13:58:26

風格提交按鈕不同

回答

相關問題