단일 요소에 의사 요소 이전에 여러 개를 적용할 수 있나요?

의사 요소 이전에 여러 개를 사용하여 동일한 요소를 향상할 수 있습니까?

소개:
CSS를 활용하는 동안 다음과 같은 일반적인 질문이 발생합니다. 단일 요소에 의사 요소를 적용하기 전에 여러 개의 :를 사용할 수 있습니까? 답을 이해하기 위해 의사 요소의 개념을 자세히 살펴보고 이들이 캐스케이드와 어떻게 상호 작용하는지 살펴보겠습니다.

CSS 의사 요소 및 캐스케이드:
CSS2.1 , 요소는 :before 또는 :after와 같이 특정 유형의 의사 요소를 한 번에 하나만 소유할 수 있습니다. 이는 요소가 둘 다 가질 수 있지만 동일한 유형의 인스턴스가 여러 개 있을 수 없음을 의미합니다.

jQuery 사용 예:
주어진 코드에 예시된 것처럼 여러 :before pseudo를 적용하려고 시도합니다. -jQuery를 사용하여 하나의 요소에 요소를 적용하면 마지막 요소만 적용됩니다.

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

계단식 동작:
여러 :before 규칙이 동일한 요소에 적용되면 다음을 따릅니다. 우선 순위가 더 높은 규칙(마지막 규칙)이 다른 규칙보다 우선 적용되는 계단식 규칙. 그러면 다음과 같이 마지막 규칙의 선언만 포함하는 단일 :before 의사 요소가 생성됩니다.

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

제한 극복:
:before가 여러 개인 경우 동일한 요소에 대해 선언이 필요한 경우 결합된 선택기를 사용하여 추가 CSS 규칙을 만들어야 합니다. 이를 통해 다양한 클래스 조합에 대해 원하는 동작을 지정할 수 있습니다.

.circle.now:before { /* Specific rule for .circle with .now */ }
.now.circle:before { /* Specific rule for .now with .circle */ }

레거시 CSS 및 향후 개발:
더 이상 사용되지 않는 CSS3 콘텐츠 사양에서는 CSS2.1 캐스케이드와 호환되는 표기법. 그러나 이 기능은 구현되지 않았습니다. 현재 css-content-3 및 css-pseudo-4 초안에서는 관심 부족으로 인해 이 기능이 생략되었습니다.

위 내용은 단일 요소에 의사 요소 이전에 여러 개를 적용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!