의사 요소를 단일 HTML 요소에 적용하기 전에 여러 개를 적용할 수 있습니까?

다중: 의사 요소 이전: A 제한 사항 개요

질문:

여러 개 가능 : 의사 요소가 단일 HTML에 적용되기 전 요소?

답변:

안타깝게도 CSS2.1에서는 동일한 요소에 대해 :before 의사 요소를 여러 개 가질 수 없습니다. 요소는 :before 및 :after를 포함하여 한 번에 하나의 의사 요소만 가질 수 있습니다.

설명:

여러 :before 규칙이 적용되는 경우 동일한 요소에 계단식으로 배열하여 단일 :before 의사 요소로 병합합니다. 우선 순위가 가장 높은 최상위 규칙에만 선언이 적용됩니다. 이는 일반 CSS 속성에 대해 캐스케이드가 작동하는 방식과 일치합니다.

따라서 귀하의 예에서는

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

두 번째 규칙만 적용되며 출력은 다음과 같습니다.

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

대안 접근 방식:

이 제한을 극복하려면 다음 중 하나를 수행할 수 있습니다.

• 여러 규칙을 .circle.now:before와 같은 단일 선택기로 결합하면 두 가지 모두에 적용됩니다.
• Sass 또는 Less와 같은 CSS 전처리기를 사용하면 선택기를 중첩하고 :before를 여러 개 만들 수 있습니다. 동일한 요소에 대한 의사 요소.

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