>  기사  >  웹 프론트엔드  >  한 요소의 의사 요소 앞에 여러 개의 :를 가질 수 있습니까?

한 요소의 의사 요소 앞에 여러 개의 :를 가질 수 있습니까?

Barbara Streisand
Barbara Streisand원래의
2024-11-11 16:38:03671검색

Can You Have Multiple :before Pseudo-Elements on One Element?

다중 :before 의사 요소

요소가 여러 :before 의사 요소를 가질 수 있나요? 이 질문은 최신 스타일만 적용되는 것처럼 보이는 jQuery를 사용하여 동일한 요소에 스타일을 적용할 때 발생합니다.

CSS2.1 제한 사항

CSS2.1에서는 요소는 주어진 시간에 특정 유형의 의사 요소를 하나만 가질 수 있습니다. 따라서 요소는 :before 및 :after 의사 요소를 모두 가질 수 있지만 각각 하나만 가질 수 있습니다.

계단식 동작

여러 :before 규칙 동일한 요소가 계단식으로 연결되어 단일 :before 의사 요소에 적용됩니다. 우선순위가 가장 높은 규칙(일반적으로 마지막 규칙)이 우선합니다. 제공된 예에서는

.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

마지막 규칙인 "Now"의 콘텐츠 선언만 적용됩니다. 나머지 선언은 일반적인 요소 속성과 유사하게 삭제됩니다.

선택기 결합

여러 선택기가 동일한 요소와 일치하고 모든 스타일을 적용하려는 경우 추가 생성 선택기가 결합된 CSS 규칙입니다. 주어진 예에서 이는 .circle.now:before 또는 .now.circle:before입니다.

레거시 CSS3 콘텐츠 사양

더 이상 사용되지 않는 CSS3 콘텐츠 사양에서는 CSS2.1 캐스케이드와 호환되는 여러 ::before 및 ::after 의사 요소를 삽입하는 표기법을 제안합니다. 그러나 이 기능은 더 이상 사용되지 않으며 어떤 브라우저에서도 구현되지 않았습니다.

위 내용은 한 요소의 의사 요소 앞에 여러 개의 :를 가질 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.