web-dev-qa-db-ja.com

特定の属性を持たない要素を選択するCSSセレクターを書く方法は？

特定の属性を持たない要素を選択する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)で終わる同様の行を探していました。

seleniumselenium-webdrivercss-selectorswebdriver
10
DebanjanB

より正確なCSSセレクタは次のとおりです。

div[class]:not([style])>button

button要素はdiv要素の子であるためです。

それがあなたを助けることを願っています！

9
Ratmir Asanov

それはあなたが探しているコードです：

_div:not([style]) button{
  background-color: red;
}
_

それでは分解しましょう。この例には4つのセレクターがあります。

  1. divおよびbutton-これらはHTML要素を選択します。たとえば、_.weEq5_のようなクラスセレクターに置き換えることができます。
  2. ：not（）-括弧内のセレクターとして適格でないすべてのものが必要であることを示します 。
  3. [style]- 属性セレクター これは非常に強力です。 htmlタグ名（ボタンまたはdiv）、クラス名、IDなどの他のCSSセレクターの内部に配置することはできません。

div:not([style])の組み合わせは、スタイル属性を持たないすべてのdivが必要であることを意味します。その後、スペースとボタンがあるので、上記のセレクター内にあるすべてのボタンが必要です。

ボタンdiv:not([style]) > buttonの前に_>_を追加すると、選択したdivの直接の子であるボタン要素のみが選択されます。 div内のより深い選択ボタンから除外されます。

9
Adam Genshaft

そもそも状況がどのように発展したのか理解できません。ページの構造では、CSSルールがドキュメント自体に「style = ...」が存在するかどうかを認識する必要があります。または、style = ...が使用されている理由ですらあります。

スタイル属性は、CSS以前の古いスタイルです。また、CSSのどの要素よりも優先されます。その属性はCSSクラス名を受け入れません。 「幅」、「高さ」、「フォント」などのネイティブhtmlスタイルプロパティのみを受け入れます-昔ながらのもの-フレームワークを介してどのように空想的または難読化されても、最終的にはCSSが解決するもの：フォント、幅、左、トップ、フロートなど。

ドキュメントで（スタイルの代わりに）クラス属性を使用すると、CSSでスマートセレクターを作成するための無限の制御を取得できます。

たとえば、必要に応じて3つのクラスをdivのclass属性に配置し、2つのクラスが存在するが3つすべてが存在する場合はセレクタにスタイルを適用させることができます。大量の柔軟性、ドキュメントで「style = ...」をオーバーライドまたは使用する必要はまったくありません。

2
John Fantastico