유사 요소를 동일한 요소에 적용하기 전에 다중을 사용할 수 있습니까?

동일한 요소에 대해 다중 :before 의사 요소

동일한 HTML 요소에 다중 :before 의사 요소를 적용할 수 있나요?

다음을 고려하세요 시나리오:

<p>Is it possible to have multiple :before pseudos for the same element?</p>

<pre class="brush:php;toolbar:false">.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.

CSS2.1에서 요소는 주어진 시간에 각 유형의 의사 요소 하나만 소유할 수 있습니다. 따라서 여러 :before 규칙이 동일한 요소를 대상으로 하는 경우 계단식으로 배열되어 단일 :before 의사 요소를 형성합니다. 제공된 예에서 결과는 다음과 같습니다.

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

가장 최근에 선언된 콘텐츠 선언이 우선 적용되며 다른 선언은 삭제됩니다. 이 동작은 일반 CSS 속성의 동작과 유사합니다.

콘텐츠가 다른 여러 의사 요소를 요소에 적용하려면 결합된 선택기를 사용하여 추가 CSS 규칙을 만듭니다. 예를 들어 .circle.now:before 또는 .now.circle:before를 사용하여 요소를 대상으로 하고 각 의사 요소에 대해 원하는 콘텐츠를 지정할 수 있습니다.

기존 CSS 사양에서는 여러 항목을 삽입하는 구문을 제안했습니다. CSS2.1 호환 캐스케이드를 사용하는 :before 및 ::after 의사 요소. 하지만 이 기능은 구현되지 않았으며 향후 사양에 포함될 가능성이 없습니다.

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