Pemilih atribut CSS tidak berfungsi a href

99

Saya perlu menggunakan selektor atribut di css untuk mengubah link pada warna dan gambar yang berbeda, tetapi tidak berhasil.

Saya memiliki html ini:

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

Dan css ini:

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

Mengapa latar belakangnya tidak berwarna merah?

html css css-selectors

— Igor Kraskynlykov
sumber

14

+1 karena saya tidak tahu tentang sebuah [attribute = 'AttributeName']

— SpaceBeers

7

@SpaceBeers, itu element[attribute_name="attribute_value"].

— JMM

193

Gunakan $ setelah href Anda. Ini akan membuat nilai atribut cocok dengan akhir string.

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)

sumber: http://www.w3.org/TR/selectors/

— Buku Zeus
sumber

1

Nilai atribut untuk mencocokkan akhir string. terdengar seperti bonus !!

— Jack

6

Jawaban ini memiliki penjelasan pemilih yang lebih baik daripada w3sekolah.

— Jeff

1

Jawaban yang diterima (menggunakan a[href$='.pdf']) mengasumsikan bahwa tautan ke pdf akan selalu diakhiri dengan .pdf. Ini belum tentu demikian, karena tautan dapat memiliki string kueri atau fragmen hash, misalnya dengan kode pelacakan UTM atau nomor halaman, dalam hal ini tautan tersebut tidak akan cocok. Faktanya, tergantung pada aplikasi Anda, ini bisa menjadi kasus untuk sebagian besar tautan.

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

Jika Anda ingin memastikan aturan Anda juga diterapkan dalam kasus tersebut, Anda dapat mencocokkan .pdfdi mana saja dalam atribut menggunakan

a[href*='.pdf']

Namun ini kemudian akan cocok dengan beberapa hal yang tidak diinginkan tetapi tidak diinginkan, seperti subdomain our.pdf.domain.com/a-page. Tapi kita bisa mempersempitnya lebih jauh, karena kita tahu kita hanya akan menggunakannya yang cocok dengan pdf yang memiliki string kueri atau fragmen hash. Jika kami menggabungkan 3 kasus, kami harus mencocokkan semua tautan pdf.

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

— inwerpsel
sumber