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

동일한 요소에 대해 의사 요소가 존재하기 전에 여러 개를 사용할 수 있습니까?

질문:

같은 요소에 여러 개의 :before 의사 요소를 적용할 수 있나요? 예:

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

답변:

아니요, CSS2.1은 요소가 주어진 시간에 모든 종류의 의사 요소 중 하나만 가질 수 있음을 지정합니다. . 즉, 요소는 :before 및 :after 의사 요소를 모두 가질 수 있지만 각 유형 중 하나만 가질 수 있습니다.

결과적으로 여러 :before 규칙이 동일한 요소를 대상으로 하는 경우, 그들은 의사 요소 앞에 단일 :으로 계단식으로 연결됩니다. 예를 들어 위 코드는 다음과 같이 축소됩니다.

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

우선 순위가 가장 높은 마지막 콘텐츠 선언만 적용됩니다.

해결 방법:

동일한 요소에 여러 개의 :before 의사 요소를 적용하려는 경우 결합된 선택기를 사용하여 브라우저가 무엇을 해야 하는지 정확하게 지정할 수 있습니다. 하다. 예를 들면 다음과 같습니다.

.circle.now:before {
    content: "○";
}
.circle.now:hover:before {
    background: #ccc;
}

이렇게 하면 내용과 스타일이 다른 두 개의 :before 의사 요소가 생성됩니다.

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