공급 업체별 의사 요소 / 클래스를 하나의 규칙 세트로 결합 할 수없는 이유는 무엇입니까?

공급 업체별 의사 요소 / 클래스를 하나의 규칙 세트로 결합 할 수없는 이유는 무엇입니까?

---

CSS에서는 placeholder공급 업체별 의사 클래스와 의사 요소의 조합을 사용하여 입력 내에서 텍스트 스타일을 사용할 수 있습니다 (최상의 브라우저 간 범위를 제공).

모두 동일한 기본 속성 (예 : 텍스트 스타일 및 색상)을 공유합니다.

필연적으로 브라우저 공급 업체에 관계없이 동일한 스타일을 적용하고 싶지만 스타일을 쉼표로 구분 된 선택기로 결합하는 것은 불가능한 것입니다 (두 개의 선택기를 공유 할 다른 CSS와 그러나 같은 스타일).

예를 들어 다음 네 가지 선택기를 사용하여 자리 표시 자 스타일을 사용하는 경향이 있습니다.

• input:-moz-placeholder
• input::-moz-placeholder
• input:-ms-input-placeholder
• input::-webkit-input-placeholder

(비록 :-moz-placeholder 되지되고 찬성 ::-moz-placeholder이 단지 그렇게 모두 현재 더 나은 브라우저 지원에 파이어 폭스 19의 발생과 함께 발생).

실망스러운 것은 각각의 (동일한) 스타일을 선언하고 부여하면 CSS 내에서 많은 반복이 발생하는 것입니다.

따라서 그 자리 표시 자 텍스트가 오른쪽 정렬 자리 기울임 꼴인지 확인하기 위해 다음과 같이 끝납니다.

input:-moz-placeholder{
    font-style: italic;
    text-align: right;
}
input::-moz-placeholder{
    font-style: italic;
    text-align: right;
}
input:-ms-input-placeholder{
    font-style: italic;
    text-align: right;
}
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

내가보고 싶은 것은 다음과 같이 쉼표로 구분되는 하나의 단일 규칙 세트로 결합하는 것입니다.

input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

그러나 작동하지 않는 것입니다. 내가 이해하지 못하는 CSS의 근본적인 부분이 것이 걱정 스럽습니다.

왜 이런 일이 발생하는지 아무도 밝힐 수 있습니까?

---

CSS2.1 상태 :

선택기 (또한 섹션 참조 선택기를 ) 첫 번째 중요 중괄호 ({) (그러나 포함하지 않음)에 모든 것을 포함합니다. 선택자는 항상 선언 블록과 함께 이동합니다. 사용자 에이전트가 선택 튼 구문 분석 할 수없는 경우 (즉, 유효한 CSS 2.1이 아님), 선택자와 다음 선언 블록 (있는 경우)도 무시 해야합니다 .

CSS2.1은 CSS3보다 이전 버전 "유효한 CSS 2.1이 아닙니다"는 사용자 에이전트가 완전히 CSS2.1을 준수하고 CSS3이 이론적으로 존재하지 않습니다. "유효한 CSS가 아닙니다"또는 그 효과에 영향을 미치는 모든 부분은 "사용자 에이전트가 사용할 수 없음"을 의미합니다. 더 자세한 설명은 이 관련 질문에 대한 내 대답을 참조하십시오 .

즉, 한 공급 업체의 브라우저가 다른 공급 업체의 접두사를 이해하지 못하기 때문에 의사 클래스 및 의사 요소 선택기에서 인식되지 않는 접두사를 포함하는 모든 규칙을 삭제해야합니다. ¹

요청한 규칙이있는 이유에 대한 주문 은 이 답변을 참조하십시오 .

---

¹ _{WebKit 은이 규칙을 부분적으로 어긋나게하는 부분적으로 악명이 있습니다. 선택자가 인식 할 수없는 접두사 의사 요소 (이 경우)가있는 규칙을 구문 분석하는 데 문제가 없습니다 ::-moz-placeholder. 즉, :-moz-placeholder결합 된 규칙 의 의사 클래스로 인해 어쨌든 중단됩니다.}

---

사양에 따르면 사용자 에이전트가 선택기의 일부를 사용하지 않는 경우 전체 장치 인식 블록을 무시해야합니다.

http://www.w3.org/TR/css3-syntax/#rule-sets

선택기 (선택기 모듈 [SELECT] 참조)는 첫 번째 대상 중괄호 ({)까지 (포함하지 않음) 모든 구성됩니다. 선택자는 항상 {} 블록과 함께 이동합니다. 사용자 에이전트가 선택기를 구문 분석 할 수없는 경우 (즉, 유효한 CSS3가 아님) {} 블록도 무시해야합니다.

참고 URL : https://stackoverflow.com/questions/16982449/why-isnt-it-possible-to-combine-vendor-specific-pseudo-elements-classes-into-on