CSS 클래스는 경계 스타일을 덮어 쓰지 않습니다.

Question

모든 텍스트 필드의 스타일을 회색 테두리로 지정하고 class="form_field_error" 인 필드의 경우 테두리 색상을 빨간색으로 변경합니다.

다음 코드를 시도했지만 이전에 정의한 테두리를 재정의하기 위해 클래스를 가져올 수 없습니까? 내가 뭘 놓치고 있니?

HTML은 :

는

<input type="text" name="title" id="title" class="form_field_error"> 

는 CSS :

input[type="text"] { 
    display: block; 
    height: 15px; 
    font-weight: normal; 
    color: #777; 
    padding: 3px; 
    border-top: 1px solid #aaa; 
    border-left: 1px solid #aaa; 
    border-bottom: 1px solid #ccc; 
    border-right: 1px solid #ccc; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 

.form_field_error { 
    border: 1px solid #f00; 
} 

나는 문제를 설명하기 위해 jsFiddle를 만들었습니다.

Answer 1

이 시도 :

.form_field_error { 
    border: 1px solid #f00 !important; 
} 

Answer 2

빨간색 테두리를 적용 할 div를 지정하려고 했습니까?

input.form_field_error { 
    border: 1px solid red; 
} 

그리고 보조 노트에

은 - 당신은 '제목'과 같이 설정 한 ID는이 단지 하나 또는 그 재사용 생각 하시나요?

당신은 또한 할 수 있기 때문에 ->

#title.form_field_error { 
    border: 1px solid red; 
} 

Answer 3

input[type="text"] CSS는 .form_field_error CSS보다 우선합니다.

input.form_field_error으로 변경하면 테두리가 작동합니다.