Satır içi stil özelliğine göre CSS seçici

114

Bu öğeyi satır içi stil öznitelik değerine göre seçmek için bir CSS seçici var mı?

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

gibi bir şey

div[cssAttribute=cssValue]

— AgelessEssence
kaynak

191

Satır içi styleözniteliği, diğer HTML özniteliklerinden farklı değildir ve bir alt dize özniteliği seçiciyle eşleştirilebilir:

div[style*="display:block"]

Ancak tam da bu nedenle son derece kırılgan . Öznitelik seçiciler normal ifadeleri desteklemediğinden, yalnızca öznitelik değerinin tam alt dize eşleşmelerini gerçekleştirebilirsiniz . Örneğin, öznitelik değerinde şunun gibi bir yerde boşluk varsa:

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

Seçicinizi alana uyacak şekilde değiştirene kadar eşleşmez. Ve sonra eşleştirme değerlerini duracaktır yok Reklam nauseum tüm permütasyon içerir sürece, uzay içerirler. Ancak, satır içi stil bildirimlerinin kendilerinin hiç değişme olasılığının düşük olduğu bir belgeyle çalışıyorsanız, iyi olmalısınız.

Bu olduğuna dikkat edin olmayan DOM yansıtılan gerçek, belirtilen bilgisayarlı veya kullanılan değerler tüm seçme unsurları. Yani CSS seçicileri ile mümkün değildir.

— BoltClock
kaynak

Çok gerekli olsa bile, bunun için gerçek bir çözüm yok.

— BoltClock

Bunu neden yapmanız gerektiğini bize söylerseniz, muhtemelen daha fazla yardımcı olabiliriz

— paslandı

Bunun ne zaman yararlı olduğuna dair bir örnek vereceğim. Bir Selenium Web Sürücüsü testi yazıyorum ve testteki gerçek kodu değiştiremiyorum / değiştirmek istemiyorum. Kod benzersiz kimlikler veya ana yapı sağlamadığından, belirli bir otomatik tamamlamayı (birkaç gizli) stil görüntüsüne göre tanımlamam gerekiyor - bunlar büyük olasılıkla geri aramada <body> 'e dökülüyor. Ama evet, senin de belirttiğin gibi kırılgan.

— andersand

Sayfanızın üst kısmına sabit bir div eklediği için sayfanızda hte google çeviri çubuğu kullanıyorsanız SON DERECE GEREKLİ olduğunu anladım - ve navigasyonumuz zaten düzeltildi. Bu teknik, çeviri çubuğunun görünür olup olmadığına bağlı olarak gezinme çubuğumuzu hareket ettirmemizi sağlar. Çeviri çubuğunun statik sınıfları vardır ve değişen tek şey görüntüleme stilidir.

— Jag

@andersand: Cevabım hakkında yeterince yorum yaptıktan sonra nihayet güncellemeye başladım. Orijinal cevabımı yazarken Selenium'u düşünmemiştim ve satır içi stil özellik seçicileri için en önemli kullanım durumlarından biri olduğuna katılıyorum.

— BoltClock

Dahil olmak üzere ";" benim için daha iyi çalışıyor.

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

— Bertrand
kaynak

Bunun nedeni, özniteliğin styleHTML özelliğiyle tam olarak eşleşmesi gerektiğidir

— RousseauAlexandre

@RousseauAlexandre Ekleniyor ";" seçici, en azından ";" ile bir öğe üzerinde çalıştığımda hiçbir fark yaratmaz. içinde ve seçicide değil. Karakterler ve boşluklar aynı olduğu sürece, dahil etmek gereksizdir ;.

— Maxie Berkmann