이전 스타일을 삭제하지 않고 새 CSS 스타일을 내 버튼에 추가하는 방법은 무엇입니까?

Question

스타일이있는 버튼이 있으며 기존 스타일을 제거하지 않고 새 스타일로 변경하고 싶습니다. 그래서 내가 가진 내 현재 버튼은 다음과 같습니다 http://jsfiddle.net/XaXg2/1/

HTML : <a id="login-button" class="s3d blue">Search</a>

CSS : #login-button { float: left; height: 28px; line-height: 28px; width: 100px; font-size: 15px; font-weight: 700; color: #FFF; border-radius: 4px; background: #AC3; text-align: center; cursor: pointer; } 나는 "로그인 버튼"스타일을 제거하지 않고 새로운 스타일을 적용 할

.

HTML : <a href="#" class="s3d blue">New Search</a>

CSS :

a.s3d { 
    clear: both; 

    -webkit-border-radius:3px; 
     -moz-border-radius:3px; 
      border-radius:3px; 

    -webkit-box-shadow:0 4px 5px rgba(0,0,0,.3); 
     -moz-box-shadow:0 4px 5px rgba(0,0,0,.3); 
      box-shadow:0 4px 5px rgba(0,0,0,.3); 

    display: inline-block !important; 
    font: 700 13px/36px 'Arial', Helvetica, Clean, sans-serif; 
    height: 26px; 
    margin: 0 0 10px; 
    padding: 0 10px 11px; 
    position: relative; 
    text-decoration: none; 
    text-shadow: 0 1px 1px rgba(255,255,255,.35); 
    width: 125px; } 

a.blue { 
    background: #65acc8; 
    background: -webkit-gradient(linear, 0 0, 0 0, from(#65acc8), to(#4586ae)); 
    background: -moz-linear-gradient(#65acc8, #4586ae); 
    background: linear-gradient(#65acc8, #4586ae); 
    border-top: 1px solid #a1cdde; 
    color: rgba(25,45,55,.9); } 

a.blue:active { 
    background: #4586ae; 
    background: -webkit-gradient(linear, 0 0, 0 0, from(#4586ae), to(#65acc8)); 
    background: -moz-linear-gradient(#4586ae, #65acc8); 
    background: linear-gradient(#4586ae, #65acc8); } 

Answer 1

사용 CSS specificity 원래 CSS를 오버라이드 (override)합니다. 당신의 선택기에 #login-button 추가 : 나는 몰랐어

jsFiddle example

#login-button { 
    float: left; 
    height: 28px; 
    line-height: 28px; 
    width: 100px; 
    font-size: 15px; 
    font-weight: 700; 
    color: #FFF; 
    border-radius: 4px; 
    background: #AC3; 
    text-align: center; 
    cursor: pointer; 
} 
a#login-button.s3d { 
    clear: both; 
    -webkit-border-radius:3px; 
    -moz-border-radius:3px; 
    border-radius:3px; 
    -webkit-box-shadow:0 4px 5px rgba(0, 0, 0, .3); 
    -moz-box-shadow:0 4px 5px rgba(0, 0, 0, .3); 
    box-shadow:0 4px 5px rgba(0, 0, 0, .3); 
    display: inline-block !important; 
    font: 700 13px/36px'Arial', Helvetica, Clean, sans-serif; 
    height: 26px; 
    margin: 0 0 10px; 
    padding: 0 10px 11px; 
    position: relative; 
    text-decoration: none; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, .35); 
    width: 125px; 
} 
a#login-button.blue { 
    background: #65acc8; 
    background: -webkit-gradient(linear, 0 0, 0 0, from(#65acc8), to(#4586ae)); 
    background: -moz-linear-gradient(#65acc8, #4586ae); 
    background: linear-gradient(#65acc8, #4586ae); 
    border-top: 1px solid #a1cdde; 
    color: rgba(25, 45, 55, .9); 
} 
a#login-button.blue:active { 
    background: #4586ae; 
    background: -webkit-gradient(linear, 0 0, 0 0, from(#4586ae), to(#65acc8)); 
    background: -moz-linear-gradient(#4586ae, #65acc8); 
    background: linear-gradient(#4586ae, #65acc8); 
}