접두사가 붙은 여러 선택기에 CSS 규칙을 하나 작성할 수 있습니까?

Question

this question에 대한 답변보기 나는 CSS 규칙을 쓰기 :

::-webkit-input-placeholder,:-moz-placeholder,::-moz-placeholder,:-ms-input-placeholder { 
    color: #999; 
} 

그래서 파이어 폭스 요소 (-moz-자리와 -moz-자리를) 인식 할 수 없습니다. 왜? 하나의 CSS 규칙에이 모든 의사 요소를 쓸 수 있습니까?

Answer 1

짧은 대답 : 아니오. 이 동작은 W3C 사양 (see 4.1)과 일치합니다. 즉, 선택기 목록에 유효하지 않은 선택기가 하나 이상있는 경우 전체 선택기 목록이 유효하지 않은 것으로 간주되므로 브라우저 별 선택기를 그룹화 할 수 없습니다.

경고 : 모든 선택기가 유효 선택기이기 때문에 동등성이 예제의 사실이다. 이러한 셀렉터 중 하나만이 인 경우 전체 셀렉터 목록이 유효하지 않습니다. 이 경우 은 세 개의 모든 제목 요소에 대한 규칙을 무효화하는 반면, 전자의 경우에는 세 개의 개별 제목 규칙 중 하나만 무효화됩니다 ( ).

Answer 2

Firefox에 따르면 선택기에 오류가 있습니다. 인식 할 수없는 의사 클래스. 따라서 규칙은 정의에 따라 전체적으로 무시됩니다.

웹킷 및 IE 용 Ditto

그래서 다른 문제에 대한 답을 나타내므로 해결 방법은 여러 규칙에 걸쳐이를 나누는 것입니다.

::-webkit-input-placeholder { 
    color: #999; 
} 
:-moz-placeholder,::-moz-placeholder { 
    color: #999; 
} 
:-ms-input-placeholder { 
    color: #999; 
} 

파이어 폭스가 두 규칙을 모두 인식하므로 동일한 규칙에 두 가지 -moz를 둘 수 있습니다. (그들은 또한 너무 규칙에 둘 다 가지고, 동일한 것을 의미하는 것은 중복이지만, 그것은 중요하지 않습니다, 그래서 그것은 작동합니다.)

Fiddle

편집 : 의견을 같이 단일 콜론 버전의 Mozilla 선택기가 작동하지 않으며 이중 콜론 버전 만 작동합니다. (최신 버전 즉, 여기에 이전 버전이 없음). 그러나 싱글 콜론 버전은 오류로 간주되지 않습니다. 그렇지 않으면이 CSS가 작동하지 않습니다.