CSS에서 여러 [element = "..."] 속성 선택자를 사용할 수 있습니까?

CSS를 사용하여 내부 앵커 태그에 아이콘을 추가하고 있습니다. 예 :CSS에서 여러 [element = "..."] 속성 선택자를 사용할 수 있습니까?

<a href="#section2">Jump to section two</a>

는하지만 난 단지 "#" (자바 스크립트와 상단의 페이지 링크)입니다 href의에 아이콘을 추가하고 싶지 않아요. 따라서이 링크는 그 뒤에 아이콘이 없습니다.

<a href="#">Back to top</a>

저는 JavaScript가 아닌 CSS로 처리하려고합니다.

이 만족할 만합니까?

a[href^="#"][href!="#"]:after { 
    /* ... */ 
}

출처

2014-03-12 Coomie

네, 여러 개의 속성 선택자가 허용됩니다. 서로 다른 속성이 필요하다는 특정 요구 사항이 있다고 생각하지 않습니다. – Barmar

예, 허용 가능합니다. – Koti

예. 선택기에 더 많은 조건을 쉽게 추가 할 수 있지만 과장하지 마십시오. 나는 당신이 할 수있는만큼 셀렉터를 단순화하려고 노력할 것을 제안한다. 이렇게하면 나중에 쉽게 수정할 수 있습니다. '# section'이 앵커 태그에 대한 표준 접두사라면 당신은 셀렉터를'a [href^= "# section"]' – Gil

여러 attribute selectors는을 허용하지만 [attr!=value] 속성 선택기가 없습니다.

당신은 선택에서 [href="#"]을 제외 :not() 의사 클래스를 사용할 수 있습니다

a[href^="#"]:not([href="#"]):after { 
    content: ' \f14c'; 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
}

이 :not() 의사 클래스 IE9+

WORKING DEMO에 작동 주목할 가치가있다. 다음과 같이

는 또한 (DOCTYPE 선언하면서) IE8 를 들어, 당신은 또한 [href="#"] 선택에 대한 적용 스타일을 무시할 수 :

a[href^="#"]:after { 
    content: ' \f14c'; 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
} 

a[href="#"]:after { 
    content: none; 
}

UPDATED DEMO합니다.

출처

2014-03-12 06:46:59

CSS에서 여러 [element = "..."] 속성 선택자를 사용할 수 있습니까?

답변

관련 문제