特定の属性を持たない要素を選択するCSSセレクターを書く方法は?
次のように2つの_<div>
_ノードがあります。
最初:
_<div class="weEq5" style="will-change; width;">
<button class="_35EW6">
_
第二:
_<div class="weEq5">
<button class="_35EW6">
_
_<div>
_(同様のクラスを使用)と、同様のdescending_<button>
_を含むそれらのそれぞれを選択する必要がありますが、 style
属性。
XPathは次のようにうまく機能しているようです:
_//div[@class and not (@style)]/button
_
同等のCssSelectorを探しています。
試行:
_div[class :not(style)]>button (doesn't works).
_
私は次の議論を行ってきましたが、class属性を:not([class])
として破棄しているようです:
:not(attribute)
で終わる同様の行を探していました。
より正確なCSSセレクタは次のとおりです。
div[class]:not([style])>button
button
要素はdiv
要素の子であるためです。
それがあなたを助けることを願っています!
それはあなたが探しているコードです:
_div:not([style]) button{
background-color: red;
}
_
それでは分解しましょう。この例には4つのセレクターがあります。
.weEq5
_のようなクラスセレクターに置き換えることができます。div:not([style])
の組み合わせは、スタイル属性を持たないすべてのdivが必要であることを意味します。その後、スペースとボタンがあるので、上記のセレクター内にあるすべてのボタンが必要です。
ボタンdiv:not([style]) > button
の前に_>
_を追加すると、選択したdivの直接の子であるボタン要素のみが選択されます。 div内のより深い選択ボタンから除外されます。
そもそも状況がどのように発展したのか理解できません。ページの構造では、CSSルールがドキュメント自体に「style = ...」が存在するかどうかを認識する必要があります。または、style = ...が使用されている理由ですらあります。
スタイル属性は、CSS以前の古いスタイルです。また、CSSのどの要素よりも優先されます。その属性はCSSクラス名を受け入れません。 「幅」、「高さ」、「フォント」などのネイティブhtmlスタイルプロパティのみを受け入れます-昔ながらのもの-フレームワークを介してどのように空想的または難読化されても、最終的にはCSSが解決するもの:フォント、幅、左、トップ、フロートなど。
ドキュメントで(スタイルの代わりに)クラス属性を使用すると、CSSでスマートセレクターを作成するための無限の制御を取得できます。
たとえば、必要に応じて3つのクラスをdivのclass属性に配置し、2つのクラスが存在するが3つすべてが存在する場合はセレクタにスタイルを適用させることができます。大量の柔軟性、ドキュメントで「style = ...」をオーバーライドまたは使用する必要はまったくありません。