집 >웹 프론트엔드 >CSS 튜토리얼 >jQuery가 :before 및 :after와 같은 CSS 의사 요소를 선택할 수 있습니까?

jQuery가 :before 및 :after와 같은 CSS 의사 요소를 선택할 수 있습니까?

Can jQuery Select CSS Pseudo-elements Like :before and :after?

jQuery를 통해 의사 요소에 액세스

이전 질문을 작업하면서 CSS 규칙의 효과를 기반으로 의사 요소를 선택하는 문제를 살펴보았습니다. jQuery 선택기를 사용하는 대체 접근 방식을 살펴보겠습니다.

배경 속성

다음 기본 CSS 속성을 고려하세요.

.commentarea .author:before {
    background-image: url(http://...);
    background-position: -9999px -9999px;
    /* ... */
}

이러한 속성은 수정됩니다. 선택적으로:

.author[href$="gbacon"]:before /* ... */ {
  content: "";
  background-position: 0 -140px
}

jQuery 선택기

기본 배경 위치로 의사 요소를 선택하려면 다음과 같은 기본 선택기가 작동하지 않습니다.

GM_log("size = " + $(".commentarea .author:before").size());

.siblings() 사용과 같은 다른 시도도 실패합니다. 원하는 결과를 얻을 수 있습니다.

의사 요소의 한계 선택기

:before 및 :after는 유효한 jQuery 선택기가 아니라는 점에 유의하는 것이 중요합니다. 특정 용도로 사용됩니다.

예 사용법

다음 HTML과 CSS는 :before 및 :after 방법을 보여줍니다. work:

<span class='a'>
    Outer
    <span class='b'>
        Inner
    </span>
</span>

.a .b:before {
    content: "|Inserted using :before|";
}

.a {
    color: blue;
}

.b {
    color: red;
}

이 예에서는 :before를 사용하여 텍스트가 내부 범위 앞에 추가됩니다.

대안

Since: before는 유효한 jQuery 선택기가 아니므로 대체 접근 방식이 필요합니다. 한 가지 옵션은 jQueryRule과 같은 외부 jQuery 플러그인을 사용하여 원래 규칙을 추출하는 것입니다.

jQuery를 사용하여 의사 요소의 스타일 속성에 액세스하는 것은 어려울 수 있습니다. 귀하의 요구 사항을 보다 효과적으로 충족할 수 있는 대체 접근 방식이 있는지 신중하게 고려하십시오.

위 내용은 jQuery가 :before 및 :after와 같은 CSS 의사 요소를 선택할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：