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

Question

동일한 요소에 대해 복수 개의 의사를 사용할 수 있습니까?

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

내가 jQuery를 사용하여 동일한 요소에 위의 스타일을 적용하기 위해 노력하고 있지만 가장 최근은, 결코 모두 그들의 적용되지 않습니다.

Answer 1

CSS2.1에서 요소는 언제든지 모든 종류의 유사 요소 만 가질 수 있습니다. (이 요소는 :before와 :after 의사 요소를 모두 가질 수 있다는 것을 의미합니다 -. 단지 각 종류 중 하나 이상을 가질 수 없습니다) 같은 요소를 일치하는 여러 :before 규칙이 결과

, 그들은 것 모두 캐스케이드하고 일반 요소와 마찬가지로 하나의 :before 의사 요소에 적용됩니다. - 선언의 나머지 부분을 당신이 볼 수 있듯이

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

것은, 가장 높은 우선 순위를 가지고에만 content 선언 (언급 한 바와 같이이 지난 오는 하나)이 적용됩니다 : 당신의 예에서, 최종 결과는 다음과 같다 다른 CSS 속성과 마찬가지로 무시됩니다.

이 동작은 Selectors section of CSS2.1에 설명되어 있습니다 : 예외는 아래에 설명과 함께

이 의사 요소는 단지 CSS에서 실제 요소처럼 행동

및 elsewhere.

이 의사 요소 선택기가 작동한다는 것을 의미 일반 요소의 선택자와 같습니다. 또한 캐스케이드가 같은 방식으로 작동해야 함을 의미합니다. 이상하게도 CSS2.1만이 유일한 참조 인 것처럼 보입니다. css3-selectors도 아니고 css3-cascade도 전혀 언급하지 않았으며, 앞으로의 스펙에서 명확 해 지는지 여부는 아직 밝혀지지 않았습니다.

요소가 동일한 의사 요소를 가진 둘 이상의 선택기와 일치 할 수 있고 모든 요소가 어떻게 든 적용되기를 원하면 조합 된 선택기를 사용하여 추가 CSS 규칙을 만들어야 브라우저를 정확히 지정할 수 있습니다 그러한 경우에해야합니다. 심볼 또는 텍스트가 먼저 오는지 여부가 명확하지 않기 때문에 여기서 content 속성을 포함하는 완전한 예제를 제공 할 수 없습니다. 그러나이 결합 된 규칙에 필요한 선택자는 .circle.now:before 또는 .now.circle:before입니다. 두 선택기가 모두 같기 때문에 선택자를 개인 선택자로 선택하면 자신을 정의하는 데 필요한 content 속성 값만 있습니다.

구체적인 예가 필요한 경우 내 대답은 this similar question입니다.

The legacy css3-content specification contains a section on inserting multiple ::before and ::after pseudo-elements CSS2.1 캐스케이드와 호환되는 표기법을 사용하지만 특정 문서는 사용되지 않습니다. 2003 년부터 업데이트되지 않았으며 지난 10 년 동안 아무도 그 기능을 구현하지 않았습니다. 좋은 소식은 버려진 문서가 css-content-3과 css-pseudo-4으로 재 작성되는 중입니다. 나쁜 소식은 다중 의사 요소 기능이 어느 스펙에서도 찾을 수 없다는 것입니다. 아마도 구현 자의 관심 부족 때문일 것입니다.

Answer 2

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

위치 주요 요소 상대 (또는 절대/고정) 모두 사용 후 절대 위치 (내 상황에서 절대해야했다, 당신의 모르는)와 전.

이제 더 많은 의사 요소가 필요하면 주 요소의 자식 중 하나의 앞에 절대 :를 붙이십시오 (텍스트 만있는 경우 범위에 넣으십시오. 이제 요소가 있음). 이는 상대적이 아닙니다/절대/고정. 이 요소는 자신의 주인처럼 행동을 시작합니다

는 주요 요소이다.

HTML

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

요소가 모두 클래스`circle`와 클래스에 속하는 경우, 지정된 경우

.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 */ 
}