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

Question

如何编写一个 CSS 选择器来选择没有特定属性的元素？

我有 2 个<div> 节点如下：

• 第一：

  <div class="weEq5" style="will-change; width;">
      <button class="_35EW6">
  

• 第二：

  <div class="weEq5">
      <button class="_35EW6">
  

我需要选择<div>（具有相似的类）以及它们中的每一个具有相似的降序 <button> 但没有style 属性。

XPath 似乎工作正常：

//div[@class and not (@style)]/button

我正在寻找一个等效的CssSelector。

试验：

div[class :not(style)]>button (doesn't works).

我已经通过以下讨论，但他们似乎将 class 属性丢弃为:not([class])，如下所示：

• Can I write a CSS selector selecting elements NOT having a certain class?
• Is it possible to define in CSS NOT to apply style if element have certain class? [duplicate]

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

Answer 1

通常，您会编写:not([style]) 来匹配没有style 属性的元素，如here 所述，它强调按顺序使用() 和[] 括号。

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

Answer 2

我认为更准确的 CSS Selector 是：

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

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

希望对你有帮助！

Answer 3

这就是您要查找的代码：

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

现在让我们分解一下。 在这个例子中我们有四个选择器：

1. div 和按钮 - 这些选择 html 元素。例如，我们可以将其替换为 .weEq5 之类的类选择器。
2. :not() - 表示我们想要所有不符合选择器条件的东西在括号内。
3. [style] - 一个非常强大的attribute selector。我们可以放置在任何其他 css 选择器中，例如 html 标签名称（按钮或 div）、类名或 id。

div:not([style]) 的组合意味着我们想要所有没有样式属性的 div。之后我们有一个空格和一个按钮意味着我们想要上面选择器内的所有按钮。

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

Answer 4

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

样式属性现在是老式的，我相信是 CSS 之前的。它也优先于 CSS 中的任何内容。该属性不接受 CSS 类名。它只接受原生 html 样式属性，如“width”、“height”、“font”——老派的东西——最终这些是你的 CSS 解析的内容，无论它通过框架多么花哨或混淆：字体、宽度、左, 顶部, 浮动.. 等等。

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

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