如何使用 CSS 选择器排除内部 web 元素？答案

【问题标题】：How to exclude inner webelement with css selectors?如何使用 CSS 选择器排除内部 web 元素？
【发布时间】：2016-11-30 19:59:19
【问题描述】：

我有这个 CSS 选择器：

$("td.cv-table-panel-element")

返回如下屏幕截图所示的元素列表：

所有这些元素都是表格的列，每一列的内容都不同。该列表中的第一个元素包含一个复选框：

我想从初始列表中排除该元素。

请注意，在这里仅仅忽略第一个元素是行不通的，因为这个复选框元素不一致并且并不总是出现。因此，它需要被其内部类之一专门排除。

我尝试了以下方法，但没有成功：

$("td.cv-table-panel-element:not(.cv-checkbox)")

有什么建议吗？

【问题讨论】：

无论您是在寻找 jQuery 还是 CSS 选择器，您都需要非常具体。 jQuery 具有许多与大多数 CSS 选择器实现不兼容的专有选择器功能，例如 Selenium（基于您在问题中使用术语“webelement”），除非您使用的是特定于 jQuery 的驱动程序。跨度>
非常感谢您的评论。您的观察确实是正确的，我确实将它用于 Selenium 自动化。事实上，我对 jQuery 和 CSS 选择器之间的区别缺乏一些了解。如果你能指出一些我可以理解这两个概念的来源，我将不胜感激！再次感谢。

标签： jquery html css jquery-selectors css-selectors

【解决方案1】：

这是一个纯 CSS 选项：

td.cv-table-panel-element:not([align="center"])

此选择器使用:not functional notation 和attribute selector。

这是一个例子：

/* td elements are red */
.cv-table-panel-element { background-color: red;}

/* td elements that DO NOT have the align="center" attribute are blue */
.cv-table-panel-element:not([align="center"]) { background-color: aqua; }

td { height: 100px; width: 100px; }

<table>
  <tr>
    <td class="cv-table-panel-element"></td>
    <td class="cv-table-panel-element"></td>
    <td class="cv-table-panel-element" align="center"></td>
    <td class="cv-table-panel-element"></td>
    <td class="cv-table-panel-element" align="center"></td>
  </tr>
</table>

【讨论】：