Pilih elemen dengan atribut yang tidak kosong

Gunakan pemilih CSS untuk memilih elemen dengan atribut yang tidak kosong

Jawapan ringkas:

 [data-foo]: tidak ([data-foo = ""]) {}

Penjelasan terperinci: (Kesimpulannya adalah sama, hanya menjelaskan mengapa kita perlu melakukan ini)

Katakan anda mempunyai elemen yang menggunakan data- khas untuk gaya:

<div data-highlight="product">
</div>

Anda ingin mencari elemen dan melakukan tindakan khas apabila diserlahkan.

 [Data-Highlight] {
  saiz font: 125%; 
}

[Data-Highlight = "Product"] img {
  Perintah: 1;
}

Harta data- adalah sebahagian daripada templat, jadi ia boleh mempunyai nilai yang anda tetapkan.

<div data-highlight="{{ value }}">
</div>

Kadang -kadang tidak ada nilai! Oleh itu output html adalah:

<div data-highlight="">
</div>

Tetapi ini boleh menjadi rumit. Lihat blok kod CSS yang pertama di atas, kami ingin mencari semua elemen dengan atribut data-highlight , namun, kami sebenarnya mahu melakukan ini hanya jika ia mempunyai nilai. Jika nilai kosong, kami hanya mahu melangkau gaya khas.

Sebaik-baiknya, apabila tidak ada nilai, kami hanya mengeluarkan harta data- dari templat HTML. Tetapi banyak bahasa templat sengaja tidak membenarkan logik yang dapat membantu kami menambah atau tidak menambah atribut itu sepenuhnya.

Sebaliknya, kita boleh menyelesaikannya menggunakan CSS:

 [Data-Highlight]: Tidak ([Data-Highlight = ""]) {
  saiz font: 125%; 
}

[Data-Highlight = "Product"] img {
  Perintah: 1;
} 

Atas ialah kandungan terperinci Pilih elemen dengan atribut yang tidak kosong. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!