CSS - 하위 클래스 만들기

Question

입력 상자의 기본 스타일이 있습니다. "req"클래스를 지정할 때 상자에 추가 스타일을 추가하고 싶습니다. 작동하지 않습니다. 여기 내 코드가있다.

CSS :

input{background-color: #000; color: #FFF; border: 1px solid #515151; width: 230px;} 
input req {background-color: Purple;} 

HTML :

<input id="FirstName" type="text" class="req" /> 

텍스트 박스는 입력 클래스 아닌 서브 클래스를 반영한다. 어떤 아이디어? 당신의 CSS 스타일 시트에서

Answer 1

변경 :

input req { ... } 

에 :

input.req { ... } 

(input.req 클래스 req에 속하는 모든 input 요소이고, input req는 input 안에있는 모든 req 요소를 표시하면서 점 접두사가 붙은 클래스 이름은 단지 shorthand for the [class~=req] attribute selector입니다.

Answer 2

밝혀졌습니다. 기본 입력 클래스와 하위 클래스 사이에 점이 필요합니다.

input.req {background-color: Purple;} 

을 또는 당신은 이미 당신의 텍스트 상자에 대해이 작업을 사용하고 있기 때문에 단순히이 스타일을 추가합니다 : 당신은 클래스 이름에서 점을 누락

input.req {background-color: Purple;} 

Answer 3

이 시도

.req {background-color: Purple;}