CSS 쉼표 사용

Question

다음은 일부 CSS 코드입니다.

.form-field {min-height: 20px; margin-bottom: 10px; padding-top: 4px; width: 80px;} 
.form-field TEXTAREA, INPUT[type='text'] {position: absolute; left: 100px; top: 0px; height: 15px;} 
.form-field TEXTAREA {height: 80px;} 

그래서 때마다 CSS를 적용해야 div.form-field에 input 또는 textarea있다.

어디서나 INPUT[type='text'] (심지어 .form-field 외부)이지만 CSS가 적용됩니다. 어떻게 그 일을 그만 두겠습니까?

Answer 1

.form-field TEXTAREA, .form-field INPUT[type='text']{ 

Answer 2

혹시라도 이것을 무시하십시오.

+ "형제 요소 E가 바로 앞에 오는 F 요소와 일치합니다." 자료 : W3

.form-field TEXTAREA + INPUT[type='text'] {position: absolute; left: 100px; top: 0px; height: 15px;} 

Answer 3

쉼표는 전체 선택기를 분리합니다. 따라서 .form-field TEXTAREA, INPUT[type='text']은 .form-field TEXTAREA과 INPUT[type='text']을 선택합니다.

관심있는 내용은 :matches() selector입니다. 현재, 이것은 FireFox에서만 :-moz-any() selector으로 사용 가능합니다. 그것은 당신이 쓸 수 있습니다 :

.form-field:-moz-any(TEXTAREA, INPUT[type='text']) 

그러나, 그것은, HTML 태그 이름은 소문자로해야 단지 보조 노트로

.form-field TEXTAREA, .form-field INPUT[type='text'] 

---

함께 가야 안전합니다. 그럼 정말 사용해야합니다

.form-field textarea, .form-field input[type='text']