쉼표로 구분된 선택기를 사용하여 CSS에서 공급업체별 의사 요소와 클래스를 결합할 수 없는 이유는 무엇입니까?

공급업체별 의사 요소와 클래스를 결합할 수 없는 이유

쉼표로 구분된 선택기를 사용하여 여러 요소에 동일한 스타일을 적용하는 편리함에도 불구하고 이 접근 방식은 공급업체별 의사 요소 및 클래스에는 적용할 수 없습니다. 이러한 불일치는 CSS2.1에 설명된 기본 규칙에서 발생합니다.

CSS2.1 사양

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

쉼표를 사용하여 이러한 규칙을 결합하려고 하면 in:

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

그러나 이 결합된 규칙 세트는 다음과 같은 이유로 실패합니다.

• 웹킷을 사용하는 브라우저(예: Safari)는 :-moz-* 접두사를 구문 분석할 수 없습니다.
• gecko(예: Firefox)를 사용하는 브라우저는 :-ms-를 구문 분석할 수 없으며 :-webkit- 접두사.
• Edge(예: Internet Explorer)를 사용하는 브라우저는 :-webkit- 및 :-moz- 접두사를 구문 분석할 수 없습니다.

결론

브라우저 파싱 제한으로 인해 벤더별 결합이 불가능합니다. 의사 요소와 클래스를 쉼표로 구분된 단일 선택기로 만듭니다. 이로 인해 다양한 브라우저에서 요소의 스타일을 지정할 때 반복적인 선언이 필요하게 됩니다.

위 내용은 쉼표로 구분된 선택기를 사용하여 CSS에서 공급업체별 의사 요소와 클래스를 결합할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!