Regex를 사용한 CSS2 속성 선택기

StackOverflow https://stackoverflow.com/questions/49368

  •  09-06-2019
  •  | 
  •  

문제

CSS 속성 선택자 속성 값을 기반으로 요소를 선택할 수 있습니다.불행하게도 나는 몇 년 동안 이 기능을 사용하지 않았습니다(주로 모든 최신 브라우저에서 지원되지 않기 때문입니다).그러나 다음과 유사한 코드를 사용하여 모든 외부 링크를 아이콘으로 장식할 수 있었다는 것을 분명히 기억합니다.

a[href=http] {
    background: url(external-uri);
    padding-left: 12px;
}

위의 코드는 작동하지 않습니다.내 질문은 다음과 같습니다 어떻게 작동하나요? 모두 선택하려면 어떻게 해야 하나요? <a> 태그 href 속성은 다음으로 시작합니다. "http"?공식 CSS 사양(위에 링크됨)에서는 이것이 가능하다고 언급조차 하지 않습니다.하지만 나는 이 일을 했던 기억이 난다.

(메모:확실한 해결책은 다음을 사용하는 것입니다. class 구별을 위한 속성.나는 HTML 코드가 작성되는 방식에 거의 영향을 미치지 않기 때문에 이것을 피하고 싶습니다.제가 편집할 수 있는 것은 CSS 코드뿐입니다.)

도움이 되었습니까?

해결책

CSS 2.1에 대해서는 다음을 참조하세요. http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

요약:

    Attribute selectors may match in four ways:

    [att]
    Match when the element sets the "att" attribute, whatever the value of the attribute.
    [att=val]
    Match when the element's "att" attribute value is exactly "val".
    [att~=val]
    Match when the element's "att" attribute value is a space-separated list of
    "words", one of which is exactly "val". If this selector is used, the words in the 
    value must not contain spaces (since they are separated by spaces).
    [att|=val]
    Match when the element's "att" attribute value is a hyphen-separated list of
    "words", beginning with "val". The match always starts at the beginning of the
    attribute value. This is primarily intended to allow language subcode matches
    (e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).

CSS3은 또한 선택기 목록을 정의합니다., 하지만 호환성이 많이 달라요.

또한 있습니다 멋진 테스트 스위트 이는 브라우저에서 어떤 선택기가 작동하는지 보여줍니다.

귀하의 예를 들면,

a[href^=http]
{
    background: url(external-uri);
    padding-left: 12px;
}

트릭을 수행해야합니다.아쉽게도 IE에서는 지원되지 않습니다.

다른 팁

Antti의 답변은 href가 다음으로 시작하는 앵커를 선택하는 데 충분합니다. http 사용 가능한 CSS2에 대한 완벽한 요약을 제공합니다. 정규식과 같은 다음과 같은 속성 선택자:

Attribute selectors may match in four ways:

[att]
Match when the element sets the "att" attribute, whatever the value of the attribute.
[att=val]
Match when the element's "att" attribute value is exactly "val".
[att~=val]
Match when the element's "att" attribute value is a space-separated list of
"words", one of which is exactly "val". If this selector is used, the words in the 
value must not contain spaces (since they are separated by spaces).
[att|=val]
Match when the element's "att" attribute value is a hyphen-separated list of
"words", beginning with "val". The match always starts at the beginning of the
attribute value. This is primarily intended to allow language subcode matches
(e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).

그러나 새로운 방법을 사용하여 나가는 모든 링크를 선택하는 적절하고 업데이트된 방법은 다음과 같습니다. CSS3 :아니다 의사 클래스 선택자 뿐만 아니라 새로운 *= 하위 문자열 구문 여전히 시작될 수 있는 내부 링크를 무시하는지 확인하십시오. http:

a[href^=http]:not([href*="yourdomain.com"])
{
    background: url(external-uri);
    padding-left: 12px;
}

*최소 IE8까지는 IE에서 지원되지 않습니다.고마워요, IE, 당신이 최고예요 :P

Antti의 예에서는 아마도 자신의 도메인에 대한 절대 링크에 대한 캐치를 추가하고 싶을 것입니다. ~하지 않다 '외부'로 플래그를 지정하고 싶습니다. 예:

a[href^="http://your.domain.com"]
{
    background: none;
    padding: 0;
}

그리고 당신은 이것을 원할 것입니다 ~ 후에 이전 선언.

링크하려는 "http-info.html"이라는 로컬 문서가 있는 경우를 대비하여 전체 프로토콜 접두사를 포함할 수도 있습니다. 예:

a[href^="http://"]
{
    background: url(external-uri);
    padding-left: 12px;
}

약간 더 복잡한 두 가지 경우 모두 값을 인용해야 합니다.제 경우에는 IE7에서 작동합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top