Question

如何编写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).

我已经经历了以下讨论，但他们似乎正在将{em> class 属性作为:not([class])丢弃，如下所示：

我在寻找以:not(attribute)结尾的类似行。

Answer 1

我认为更准确的CSS选择器是：

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

因为button元素是div元素的子元素。

希望对您有帮助！

Answer 2

这就是您要查找的代码：

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

现在让我们分解一下。在此示例中，我们有四个选择器：

div和按钮-这些选择html元素。例如，我们可以将其替换为.weEq5之类的类选择器。
：not（）-表示我们希望所有不属于选择器的东西都在括号内。
[样式] -非常强大的attribute selector。我们可以将诸如HTML标记名称（按钮或div），类名称或ID之类的其他CSS选择器放置在内部。

div:not([style])的组合意味着我们希望所有不具有样式属性的div。之后，我们有一个空格和一个按钮，表示我们希望所有按钮都位于上面的选择器内。

在按钮>之前添加div:not([style]) > button将仅选择作为所选div的直接子元素的按钮元素。它将从div较深的选择按钮中排除。

Answer 3

通常，您将编写:not([style])来匹配不具有style属性的元素，如here所述，其中强调同时使用()和{{ 1}}括号，按此顺序。

但是，如果这在Selenium WebDriver中不起作用，并且更糟糕的是，如果[]的工作方式与我期望的:not(style)完全相同，那么它的CSS选择器解析器就是一个错误，因为{{ 1}}实际上意味着“不是:not([style])元素”，这使:not(style)成为多余元素，因为一个元素只能是style或div:not(style)，而不能同时是两者。除非您绝对需要选择器，否则我强烈建议您使用XPath定位器策略，而不要像Selenium WebDriver的CSS选择器引擎那样依赖此类怪癖，这会迫使您编写不正确且在接受选择器的任何其他地方都不起作用的选择器。

Answer 4

我不明白这种情况是如何发展的，首先，页面的结构需要CSS规则了解文档本身是否存在“ style = ...”。甚至为什么要使用style =...。

我认为CSS之前的style属性现在已经过时了。它还优先于CSS中的任何内容。该属性不接受CSS类名称。它仅接受原生的html样式属性，例如“宽度”，“高度”，“字体”-老式的东西-最终，CSS会解决这些问题，无论它是如何通过框架实现的：字体，宽度，左侧，顶部，浮动等等。

通过在文档中使用class属性（而不是样式），您将获得无限的控制权，可以在CSS中编写智能选择器。

例如，如果需要，可以在div的class属性中放置3个类，如果存在2个类，则让选择器将样式应用于该样式，但如果所有3个类都存在，则选择器将样式应用于它。大量的灵活性，根本不需要覆盖或使用文档中的“ style = ...”。

如何编写CSS选择器来选择不具有特定属性的元素？

4 个答案: