공급업체별 의사 요소와 클래스를 단일 CSS 규칙에 결합할 수 없는 이유는 무엇입니까?

CSS에서 공급업체별 의사 요소와 클래스 혼합

CSS에서는 공급업체별 의사 요소와 클래스를 사용하여 다음을 수행하는 경우가 많습니다. 브라우저 호환성을 향상시킵니다. 그러나 유사한 속성을 공유함에도 불구하고 이들을 하나의 규칙 세트로 결합하는 것은 불가능합니다.

왜 안 될까요?

CSS2.1에서는 선택자가 사용자 에이전트는 선언 블록을 적용합니다. 선택기에서 공급업체 이름 앞에 붙으면 일부 브라우저에서 인식할 수 없는 문자가 표시됩니다. 따라서 사용자 에이전트는 유효성을 유지하기 위해 이러한 규칙을 삭제해야 합니다.

구체적으로:

• 공급업체의 브라우저는 서로의 접두사를 이해하지 못합니다.
• 쉼표로 구분된 선택기 공급업체 접두사를 포함하는 경우 각 브라우저에 대해 인식할 수 없는 선택기가 하나 이상 있으므로 전체 규칙이 다음과 같이 됩니다. 무시됩니다.

스타일링에 미치는 영향

예를 들어 자리 표시자 텍스트의 스타일을 지정할 때 이러한 제한으로 인해 각 공급업체마다 별도의 규칙이 필요하므로 여러 개의 중복 규칙을 작성해야 합니다. 접두사:

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;
}

결론

이 제한 사항을 이해하면 유효하고 일관된 CSS 스타일을 만들 수 있습니다. 브라우저 호환성을 위해 공급업체 접두사가 필요한 경우가 있지만 브라우저별 구문 분석 규칙으로 인해 이를 단일 규칙 세트에 혼합하는 것은 여전히 ​​불가능합니다.

위 내용은 공급업체별 의사 요소와 클래스를 단일 CSS 규칙에 결합할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!