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

Posted 2023-03-06

【中文标题】如何编写 CSS 选择器选择不具有特定属性的元素？

【英文标题】：How to write a CSS Selector selecting elements NOT having a certain attribute?

【发布时间】：2019-05-24 10:43:01

【问题描述】：

如何编写一个 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)结尾的类似行。

【问题讨论】：

您已经有了答案 - 只需在示例中出现“class”的地方替换“style”即可。

@BoltClock 已尝试但未在 Test 模板中得到解决。

使用div:not([style]) button 或div[class]:not([style]) button 为我解决问题。

@BoltClock div[class]:not(style) button 似乎工作完美。

@DebanjanB，你是对的。关于排除style 属性的担忧。 div:not([style]) button 这找到第二个按钮。您可以使用其他周围元素来使其更加健壮。

【参考方案1】：

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

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

【讨论】：

确实是小众想法。你能帮我理解你用过的这个短语 ...一个元素只能是 div 或 style 但不能同时是两者... 因为当我在通过html <div> Tag，该示例基于<div style="background-color:lightblue">，即带有style属性的<div>标签。

@DebanjanB：标签名称为div。 :not(style) 的意思是“标签名称不是 style”。由于div 是div，:not(style) 将始终适用于该元素，就像:not(p) 或:not(span) 将适用于该元素一样。它与样式属性无关。

谢谢。现在已经清零了。 <style> 本身也是一个 标签 以及 HTML <style> Tag 这不是我们正在处理的当前用例。

【参考方案2】：

我认为更准确的 CSS Selector 是：

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

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

希望对你有帮助！

【参考方案3】：

这就是您要查找的代码：

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

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

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

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

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

【参考方案4】：

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

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

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

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

【讨论】：

样式属性是后 CSS。它的语法是 from CSS 派生的，而不是相反。您列出的“本机 html 样式属性”不是您正在考虑的老式表示属性，而是现代（相对而言）与级联样式表的其余部分参与相同级联的 CSS 属性。事实上，这些天来，表现属性是使用 CSS 实现的，尽管我不确定当 1996/97 年第一批支持 CSS 的浏览器出现时，它是否曾经以相反的方式实现。

总而言之，这里的用例不是用 CSS 设置元素样式，从标签中可以看出，这是一个使用 Selenium WebDriver 的自动化测试用例，它不涉及应用或覆盖 CSS .