インラインスタイル属性によるCSSセレクター

114

インラインスタイル属性値によってこの要素を選択するためのCSSセレクターはありますか？

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

何かのようなもの

div[cssAttribute=cssValue]

— エイジレスエッセンス
ソース

191

インラインstyle属性は他のHTML属性と同じであり、サブストリング属性セレクターと一致させることができます。

div[style*="display:block"]

これがまさに理由ですが、非常に壊れやすいのです。属性セレクターは正規表現をサポートしていないため、属性値の部分文字列の完全一致のみを実行できます。たとえば、次のように属性値のどこかにスペースがある場合：

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

スペースに合わせてセレクターを変更するまで一致しません。そして、すべての順列、悪心を含まない限り、スペースを含まない値のマッチングを停止します。しかし、インラインスタイルの宣言自体がまったく変更されそうにないドキュメントで作業している場合は、問題ありません。

これは、DOMに反映されている実際の指定、計算、または使用された値による要素の選択ではないことにも注意してください。CSSセレクターではそれは不可能です。

— ボルトクロック
ソース

たとえそれが必要であるとしても、それはあまりにも悪いことですが、これに対する実際の解決策はありません。

— BoltClock

なぜこれを行う必要があるのかを教えていただければ、私たちはおそらくさらに手助けすることができます

— 腐食

これが役立つ例を紹介します。私はSelenium Web Driverテストを書いていますが、テストで実際のコードを変更することはできません。コードは一意のIDまたは親構造を提供しないため、スタイルの表示によって特定のオートコンプリート（いくつかは非表示になっています）を識別する必要があります。これらはおそらくコールバックで<body>にダンプされます。しかし、ええ、あなたが指摘するようにそれは壊れやすいです。

— アンデルサンド2013

ページの上部に固定されたdivが追加され、ナビゲーションが既に固定されているため、ページでgoogle変換バーを使用する場合、これは非常に必要です。この手法により、翻訳バーが表示されているかどうかに応じて、ナビゲーションバーを移動できます。変換バーには静的クラスがあり、変更されるのはその表示スタイルだけです。

— ジャグ

@andersand：私の回答についての十分なコメントの後に、ようやくそれを更新することにしました。元の回答を書いているときはセレンについては考えていませんでしたが、インラインスタイルの属性セレクターの最も有名な使用例の1つであることに同意します。

— BoltClock

「;」を含む私にとってはうまくいきます。

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

— ベルトラン
ソース

これは、属性styleがHTMLプロパティ

— RousseauAlexandre

@RousseauAlexandre「;」を追加セレクターへの変更は、少なくとも「;」を使用して要素を試したとき、違いはありません。セレクタではなく、その中で。文字とスペースが同じである限り、を含める必要はありません;。

— Maxie Berkmann