css .class는 a.class를 추가하지 않으면 앵커 태그에서 작동하지 않습니다. 왜?

Question

버튼과 앵커 태그를 스타일링하는 데 사용하는 간단한 CSS 클래스가 있지만 이상한 것이 있습니다.

.green 
{ 
    background-color: #35db22; 
    color:white; 
} 

버튼에 적용하면 정상적으로 작동합니다. 하지만 앵커 태그에 적용하려고하면 내 '버튼'클래스와 같은 다른 클래스는 앵커 태그에서 작동하지만 그렇지 않습니다.

.green, a.green 
{ 
    background-color: #35db22; 
    color:white; 
} 

내가이 이상하다 생각 뿐이야 :이 디버깅 동안

<a class="button green">green</a> 

, 내가 그것을 클래스 선택기에 a.green를 추가하여 작업 않습니다 발견? 왜 이런 일이 일어나는 걸까요? 나는 이러한 클래스의 많은이 그래서 그들 모두에 추가는 :(... 시간이 많이 걸립니다

일이야? 나 CSS를이 단지 버그가 있는지 어떤 생각?

ZachSaucier가 요구하기 때문에

편집 여기에 좀 더 CSS의 :

/*CONTROLS*/ 
button, a.button, input[type="submit"], input[type="button"] 
{ 

    text-align:center; 

    min-height:20px; 
    min-width:100px; 
    font-size:20px; 

    border: none; 
    padding: 5px; 
    background-color: darkgray; 
    color: black; 
    text-decoration: none; 

    -moz-transition: all 0.5s ease-out; 
    -o-transition: all 0.5s ease-out; 
    -webkit-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
} 
button:hover, a.button:hover, input[type="submit"]:hover, input[type="button"]:hover 
{ 
    background-color:gray; 
    color:whitesmoke; 
} 

button:active, a.button:active, input[type="submit"]:active, input[type="button"]:active 
{ 
    background-color:black; 
    color:white; 
} 


.green 
{ 
    background-color: #35db22; 
    color:white; 
} 

내가 CSS를 초보자를, 그래서이 ... 분명 뭔가있을

Answer 1

.green 규칙보다 우선 한 .green 정의 이후 어딘가에 .button 규칙이 있습니다.

또는 .green 클래스를 무시하는 .green보다 더 구체적 인 a.button 규칙이 있습니다.

.green 클래스를 a.green으로 변경하면 더 구체적으로 셀렉터가 만들어지고 a.green 선택자가 브라우저에 더 중요합니다.

사용중인 브라우저의 개발자 도구를 확인하고 무엇이 .green 클래스의 값보다 우선 적용되는지 확인할 수 있습니다. 일반적으로 F12 키를 눌러 개발자 도구를 열 수 있으며 개발자 도구 및 웹에서 사용하는 방법에 대한 정보를 찾을 수 있습니다.