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

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

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

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

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

CSS 2.1에서 요소는 항상 임의의 종류의 유사 요소 중 최대 하나만 가질 수 있습니다.(이것은 요소가 둘 다 가질 수 있다는 것을 의미합니다.:before 리고그.:after유사 변수 - 각 종류를 둘 이상 포함할 수 없습니다.)

결과적으로, 당신이 복수를 가지고 있을 때.:before요소에 으로 단일 됩니다.:before일반적인 요소와 마찬가지로 유사-양성자입니다.예제에서 최종 결과는 다음과 같습니다.

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

처럼 피시다, 오직만 .content가장 높은 우선 순위를 가진 선언(앞에서 언급한 것처럼, 마지막에 오는 선언)이 적용됩니다. 나머지 선언은 다른 CSS 속성의 경우와 마찬가지로 폐기됩니다.

이 동작은 CSS 2.1의 Selectors 섹션에 설명되어 있습니다.

유사 요소는 아래와 다른 곳에서 설명된 예외를 제외하고 CSS의 실제 요소와 똑같이 작동합니다.

이는 유사 요소가 있는 선택기가 일반 요소의 선택기와 동일하게 작동함을 의미합니다.그것은 또한 캐스케이드가 같은 방식으로 작동해야 한다는 것을 의미합니다.이상하게도, CSS2.1이 유일한 참조인 것 같습니다. CSS3-selector와 CSS3-cascade 모두 이에 대해 전혀 언급하지 않으며, 향후 사양에서 명확해질지는 두고 봐야 합니다.

요소가 동일한 유사 요소를 가진 둘 이상의 선택기와 일치할 수 있고 모든 선택기를 어떻게든 적용하려면 결합된 선택기로 추가 CSS 규칙을 만들어 브라우저가 이 경우 수행해야 할 작업을 정확히 지정할 수 있습니다.다음을 포함한 완전한 예를 제공할 수 없습니다.content예를 들어 기호나 텍스트가 먼저 와야 하는지 명확하지 않기 때문에 속성을 여기에 표시합니다. 이 는 그나이결규필칙요선한택다다중하니입나음는기에러합된▁either▁you입니다..circle.now:before또는.now.circle:before 중 것이든 하면 됩니다.content사용자 정의에 필요한 속성입니다.

아직도 구체적인 예가 필요하다면, 이 비슷한 질문에 대한 나의 대답을 보세요.

레거시 CSS3 콘텐츠 사양에는 CSS2.1 캐스케이드와 호환되는 표기법을 사용하여 여러 개의 유사 요소를 삽입하는 섹션이 포함되어 있지만, 특정 문서는 구식입니다. 2003년 이후 업데이트되지 않았고, 지난 10년 동안 아무도 이 기능을 구현하지 않았습니다.좋은 소식은 버려진 문서가 css-content-3과 css-seudo-4로 가장하여 적극적으로 다시 작성되고 있다는 것입니다.나쁜 소식은 두 사양 모두에서 다중 유사 요소 기능을 찾을 수 없다는 것입니다. 아마도 구현자의 관심 부족 때문일 것입니다.

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

주 요소 상대(또는 절대/고정)를 배치하고 :before와 :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 loman 등)을 사용할 것이기 때문입니다.

내용 필드에서 이미지/아이콘 및 텍스트를 사용할 수도 있습니다.

예.

p.album-title::after {
  content: url('https://...camera-icon-blue.png') ' View >';
  display: block;
  ...;
}

In :::css 집합 이후content:'any text'추가backgroun-image외부 svg 파일의 svg 텍스트 사용url(anySvgText.svg)또는 인라인 svg 코드url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">any second text</text></svg>')

또한 대신 svg만 사용할 수 있습니다.content값. 그러나 빈 문자열을 설정해야 합니다(content: ''::after 스타일을 표시합니다.

.circle:before {
    content: "\25CF";
    font-size: 19px;
    color: red;
    width: 200px;
    display: block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">Now</text></svg>');
    background-position-x: 15px;
}

<div class="circle"></div>

언급URL : https://stackoverflow.com/questions/11998593/can-i-have-multiple-before-pseudo-elements-for-the-same-element