동일한 요소에 대해 여러 개의 : before 의사 요소를 가질 수 있습니까?

:before동일한 요소에 대해 여러 의사 를 가질 수 있습니까?

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

jQuery를 사용하여 위의 스타일을 동일한 요소에 적용하려고하는데 가장 최근의 스타일 만 적용되고 둘 다 적용되지는 않습니다.

CSS2.1에서 요소는 항상 모든 종류의 의사 요소 중 하나만 가질 수 있습니다. (이것은 요소가 a :before와 :after가상 요소를 모두 가질 수 있음을 의미 합니다. 단지 각 종류를 둘 이상 가질 수 없습니다.)

결과적으로 :before동일한 요소와 일치하는 여러 규칙 :before이있는 경우 일반 요소와 마찬가지로 모두 계단식으로 연결되고 단일 의사 요소에 적용됩니다 . 귀하의 예에서 최종 결과는 다음과 같습니다.

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

보시다시피 content우선 순위가 가장 높은 선언 (설명 된대로 마지막에 오는 선언) 만 적용됩니다. 나머지 선언은 다른 CSS 속성의 경우와 마찬가지로 삭제됩니다.

이 동작은 CSS2.1 의 선택자 섹션에 설명되어 있습니다 .

유사 요소는 아래 및 다른 곳에서 설명하는 예외를 제외하고 CSS의 실제 요소처럼 작동합니다 .

이것은 유사 요소가있는 선택기가 일반 요소의 선택기와 같이 작동 함을 의미합니다. 또한 캐스케이드가 동일한 방식으로 작동해야 함을 의미합니다. 이상하게도 CSS2.1이 유일한 참조 인 것 같습니다. 둘 CSS3 선택자 도 CSS3-폭포는 전혀 이것을 언급하지, 그리고 그것이 미래의 사양에 명확하게 될 것인지두고 볼 일이다.

요소가 동일한 유사 요소를 가진 둘 이상의 선택기와 일치 할 수 있고 모든 선택기를 어떻게 든 적용하려는 경우 브라우저가 수행해야하는 작업을 정확히 지정할 수 있도록 결합 된 선택기로 추가 CSS 규칙을 만들어야합니다. 케이스. 예를 들어 content기호 또는 텍스트가 먼저 와야하는지 여부가 명확하지 않기 때문에 여기에 속성을 포함하는 완전한 예를 제공 할 수 없습니다 . 그러나이 결합 된 규칙에 필요한 선택기는 .circle.now:before또는입니다. .now.circle:before두 선택자가 동일하므로 사용자가 선택하는 선택자가 개인 선호 사항이며, content사용자가 직접 정의해야하는 속성 의 값일뿐 입니다.

여전히 구체적인 예가 필요하면 이 유사한 질문에 대한 내 답변을 참조하십시오 .

레거시 css3-content 사양에는::before::after CSS2.1 캐스케이드와 호환되는 표기법을 사용하여 다중 및 의사 요소 삽입에 대한 섹션이 포함되어 있지만 특정 문서는 더 이상 사용되지 않습니다. 2003 년 이후로 업데이트되지 않았으며 아무도 지난 10 년 동안이 기능을 구현했습니다. 좋은 소식은 버려진 문서가 css-content-3 및 css-pseudo-4 의 모습으로 활발하게 재 작성되고 있다는 것입니다 . 나쁜 소식은 다중 의사 요소 기능이 어느 사양에서도 찾을 수 없다는 것입니다. 아마도 구현 자의 관심이 부족하기 때문일 것입니다.

기본 요소에 하위 요소 나 텍스트가있는 경우이를 사용할 수 있습니다.

주요 요소를 상대 위치 (또는 절대 / 고정)로 지정하고 : before 및 : after 절대 위치를 모두 사용합니다 (내 상황에서는 절대 위치 여야합니다.

이제 하나 이상의 가상 요소를 원하면 절대 : before를 기본 요소의 자식 중 하나에 연결합니다 (텍스트 만있는 경우 범위에 넣으면 이제 요소가 있음). 상대 / 절대 / 고정이 아닙니다. .

이 요소는 그의 소유자가 귀하의 주요 요소 인 것처럼 작동하기 시작합니다.

HTML

<div class="circle">
    <span>Some text</span>
</div>

CSS

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

다음을 사용하여이 문제를 해결했습니다.

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

아이콘에 "font awesome 5 free"글꼴 패밀리를 사용하고 그 후에 다시 사용할 글꼴을 지정해야합니다. 이렇게하지 않으면 내비게이터가 기본 글꼴 (times new roman 또는 이).