2012-04-13 71 views
-1

我喜歡這些按鈕,但我需要它們隻影響具有唯一id(或class)的按鈕。如何改變他們?我試圖做到這一點,但它沒有工作,如果他們在div div與css的btns或該按鈕有一個id或什麼?如何更改css隻影響id或類而不是輸入[type =「」]

<pre><code> 
<html> 
<head> 
<style type="text/css"> 

input[type="submit"], input[type="button"] { 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

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


float: right; 
    margin: 2em 1em 0 1em; 
    width: 10em; 
    padding: .5em; 
    border: 1px solid #666; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); 
    -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); 
    box-shadow: 0 0 .5em rgba(0, 0, 0, .8); 
    color: #fff; 
    background: #0a0; 
    font-size: 1em; 
    line-height: 1em; 
    font-weight: bold; 
    opacity: .7; 
    -webkit-appearance: none; 
    -moz-transition: opacity .5s; 
    -webkit-transition: opacity .5s; 
    -o-transition: opacity .5s; 
    transition: opacity .5s; 
} 

input[type="submit"]:hover, 
input[type="submit"]:active, 
input[type="button"]:hover, 
input[type="button"]:active { 
    cursor: pointer; 
    opacity: 1; 
} 

input[type="submit"]:active, input[type="button"]:active { 
    color: #333; 
    background: #eee; 
    -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset; 
    -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset; 
    box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset; 
} 

input[type="button"] { 
    background: #f33; 
} 
</style> 


</head> 
<body> 

    <div id="formButtons"> 
    <input type="submit" id="sendMessage" name="sendMessage" value="Reply" /> 
    <input type="button" id="cancel" name="cancel" value="Cancel" /> 
    </div> 

</body> 
</html> 


</code></pre> 

回答

0

這是你在問什麼?

#yourIdHere{ /* impacts only ID */ } 

.yourClassHere{ /* impacts only elements with class */ } 

INPUT.yourClassHere{ /* impacts only inputs with class */ } 

CSS提供了豐富的選擇器(其中有許多可組合使用):http://www.w3.org/TR/selectors/#selectors

1

如果您需要申請的CSS所有按鈕

input[type="button"] 
{ 
    /* CSS property */ 
} 

,如果你想申請的CSS到特定的按鈕,不需要提供輸入[type =「button」],只需使用一個類或ID

.special_button 
{ 
    /* my css property */ 
} 

#special_button 
{ 
    /* my css property */ 
} 
相關問題