Pemilih CSS menurut atribut gaya sebaris

114

Apakah ada pemilih CSS untuk memilih elemen ini dengan nilai atribut gaya sebarisnya?

<div style='display:block'>...</div>

sesuatu seperti

div[cssAttribute=cssValue]

— AgelessEssence
sumber

191

styleAtribut inline tidak berbeda dengan atribut HTML lainnya dan dapat dicocokkan dengan pemilih atribut substring:

div[style*="display:block"]

Namun untuk alasan inilah ia sangat rapuh . Karena pemilih atribut tidak mendukung ekspresi reguler, Anda hanya dapat melakukan pencocokan substring yang sama persis dengan nilai atribut. Misalnya, jika Anda memiliki spasi di suatu tempat di nilai atribut, seperti ini:

<div style='display: block'>...</div>

Ini tidak akan cocok sampai Anda mengubah pemilih Anda untuk mengakomodasi ruang. Dan kemudian itu akan berhenti mencocokkan nilai yang tidak berisi spasi, kecuali Anda menyertakan semua permutasi, ad nauseum. Namun jika Anda bekerja dengan dokumen di mana deklarasi gaya sebaris itu sendiri tidak mungkin berubah sama sekali, Anda akan baik-baik saja.

Perhatikan juga bahwa ini tidak sama sekali unsur pemilihan dengan yang ditentukan, dihitung atau digunakan nilai-nilai mereka yang sebenarnya sebagaimana tercermin dalam DOM. Itu tidak mungkin dilakukan dengan pemilih CSS.

— BoltClock
sumber

Bahkan jika itu diperlukan, sayang sekali, tidak ada solusi nyata untuk ini.

— BoltClock

jika Anda dapat memberi tahu kami mengapa Anda perlu melakukan ini, maka kami mungkin dapat membantu lebih banyak

— terkorosi

Saya akan memberi Anda contoh kapan ini berguna. Saya sedang menulis tes Selenium Web Driver dan tidak bisa / tidak ingin mengubah kode sebenarnya yang sedang diuji. Saya perlu mengidentifikasi pelengkapan otomatis tertentu (ada beberapa yang tersembunyi) dengan tampilan gaya, karena kode tersebut tidak memberikan id unik atau struktur induk - kemungkinan besar dibuang ke <body> di callback. Tapi ya, itu rapuh seperti yang Anda tunjukkan.

— andersand

Saya merasa SANGAT DIBUTUHKAN jika menggunakan hte google translate bar di halaman Anda karena menambahkan div tetap ke bagian atas halaman kami - dan navigasi kami sudah diperbaiki. Teknik ini memungkinkan kita untuk memindahkan bilah navigasi tergantung apakah bilah terjemahan terlihat atau tidak. Bilah terjemahan memiliki kelas statis dan satu-satunya hal yang berubah adalah gaya tampilannya.

— Jag

@andersand: Setelah cukup banyak komentar pada jawaban saya, saya akhirnya bisa memperbaruinya. Saya tidak memikirkan tentang Selenium ketika menulis jawaban asli saya dan saya setuju ini adalah salah satu kasus penggunaan yang paling menonjol untuk pemilih atribut gaya sebaris.

— BoltClock

Termasuk ";" bekerja lebih baik untuk saya.

div[style*="display:block;"]

— Bertrand
sumber

Ini karena atribut styleharus sama persis dengan properti HTML

— RousseauAlexandre

@RousseauAlexandre Menambahkan ";" bagi pemilih tidak ada bedanya setidaknya ketika saya mencoba elemen dengan ";" di dalamnya dan bukan di selektor. Selama karakter dan spasinya sama, tidak perlu disertakan ;.

— Maxie Berkmann