CSS 속성 선택기가 href가 작동하지 않습니다.

CSS에서 속성 선택기를 사용하여 다른 색상과 이미지의 링크를 변경해야하는데 작동하지 않습니다.

이 HTML이 있습니다.

<a href="/manual.pdf">A PDF File</a>

그리고이 CSS :

a {
     display: block;
     height: 25px;
     padding-left: 25px;
     color:#333;
     font: bold 15px Tahoma;
     text-decoration: none;
 }
 a[href='.pdf'] { background: red; }

배경이 빨간색이 아닌 이유는 무엇입니까?

href 뒤에 $를 사용하십시오. 그러면 문자열의 끝과 일치하는 속성 값이 만들어집니다.

a[href$='.pdf'] { /*css*/ }

JSFiddle : http://jsfiddle.net/UG9ud/

E[foo]        an E element with a "foo" attribute (CSS 2)
E[foo="bar"]  an E element whose "foo" attribute value is exactly equal to "bar" (CSS 2)
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" (CSS 2)
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" (CSS 3)
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" (CSS 3)
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" (CSS 3)
E[foo|="en"]  an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" (CSS 2)

출처 : http://www.w3.org/TR/selectors/

허용되는 대답 (사용 a[href$='.pdf'])은 pdf에 대한 링크가 항상 .pdf. 링크가 UTM 추적 코드 또는 페이지 번호와 함께 쿼리 문자열 또는 해시 조각을 가질 수 있으므로 반드시 그런 것은 아닙니다.이 경우 해당 링크는 일치하지 않습니다. 실제로 응용 프로그램에 따라 대부분의 링크에 해당 할 수 있습니다.

<a href="/manual.pdf?utm_source=homepage">A PDF File</a>
<a href="/manual.pdf#page=42">A PDF File</a>

이러한 경우에도 규칙이 적용되도록하려면 다음을 .pdf사용하여 속성의 어느 곳에서나 일치시킬 수 있습니다.

a[href*='.pdf']

그러나 이것은 하위 도메인과 같이 예상치 못하지만 의도하지 않은 것과 일치 our.pdf.domain.com/a-page합니다. 그러나 쿼리 문자열이나 해시 조각이있는 pdf 와만 일치하는 것을 알기 때문에 더 좁힐 수 있습니다. 세 가지 경우를 결합하면 모든 pdf 링크와 일치해야합니다.

a[href$='.pdf'], a[href*='.pdf?'], a[href*='.pdf#'] {
    background: red;
}