CSS属性セレクターがhrefを機能しない

99

別の色と画像のリンクを変更するには、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; }

背景が赤くないのはなぜですか？

html css css-selectors

— イゴール・クラスキンリコフ
ソース

14

+1 [a [attribute = 'AttributeName']について知らなかったため

— SpaceBeers

7

@SpaceBeers、それelement[attribute_name="attribute_value"]です。

— JMM

193

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/

— ゼウスの書
ソース

1

文字列の末尾と一致する属性値。ボーナスのように聞こえます!!

— ジャック

6

この答えはw3schoolsよりもセレクターの説明が優れています。

— Jeff

1

受け入れられた回答（を使用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にのみ一致するため、これをさらに絞り込むことができます。3つのケースを組み合わせると、すべてのPDFリンクに一致するはずです。

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

— Inwerpsel
ソース