非法 CSS 选择器

Posted 2023-03-06

【中文标题】非法 CSS 选择器

【英文标题】：Illegal CSS Selector

【发布时间】：2013-06-03 20:06:24

【问题描述】：

我想将此 CSS 选择器与 Selenium webdriver 一起使用

#coordinatonTable .odd:not(:has(.dataTables_empty))

我收到“指定的字符串无效或非法”错误。 我尝试了 w3schools 的 jquery 选择器测试。此服务还向我显示“非法选择器”。 如果我缩短选择器，它会起作用

#short .odd:not(:has(.dataTables_empty))
#coordinatonTable .odd:not(:has(.short))
#short .odd:not(:has(.short))

看起来选择器太长了。但这不可能是真的。 有什么建议吗？

html部分的结构是这样的：

id="coordinatonTable"
  class="odd"
    class="dataTables_empty"
  class="odd"
    class="something"
  class="odd"
    class="somethingelse"
  ...

如果没有空子元素，我想获取所有奇数元素。

【参考方案1】：

:has 是一个 jQuery 选择器 - 它不是 CSS3 规范的一部分。如果您只是检查某个类的不存在，请执行以下操作：

#coordinatonTable .odd:not(.dataTables_empty)

【参考方案2】：

:has 不是有效的 CSS 选择器。它是一个 jQuery 扩展，在任何 CSS 文件中都是无效的。

我不知道为什么您的其他示例没有导致错误。他们为我做。

【讨论】：

好的，谢谢。我混合了两种不同的东西。没错。但是我怎样才能选择没有 has 的奇数元素呢？我为此更新了问题。

@user1482309 CSS 中没有“父选择器”。最简单的解决方案是向祖先元素添加一个类。您可以在服务器端或使用客户端代码（例如 jQuery）来执行此操作。

【参考方案3】：

您正在寻找的是一个令人垂涎的（但不可用）父选择器。就像其他人提到的那样，:has 只是 jQuery 并且会被 CSS 拒绝。目前还没有办法使用纯 CSS 根据元素包含的子元素来更改元素的样式。如果您可以访问执行循环并创建元素的后端，则可以先检查是否有任何子级，然后添加一个“空”类和“奇​​数”类。

例子：

id="coordinatonTable"
    class="odd empty"
        class="dataTables_empty"
    class="odd"
        class="something"
    class="odd"
        class="somethingelse"
    ...

或者，如果这不可能，您可以在 DOM 加载后使用 javascript 循环并将空类添加到父元素。无论哪种方式，您都需要在父元素上获得一个类，以便您可以这样做：

.odd.empty 
    /* Special CSS for empty cell */

【讨论】：

@user1482309 是的，没错，但这会带走对 IE8 及更低版本的兼容性。我猜这完全取决于用例。