我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“ male”的TD?
我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“ male”的TD?
如果您使用的是Chimp / Webdriver.io,那么它们比CSS规范支持更多的CSS选择器。
例如,这将单击包含单词“ Bad bear”的第一个锚点:
browser.click("a*=Bad Bear");
恐怕这是不可能的,因为内容不是属性,也不能通过伪类访问。CSS3选择器的完整列表可以在CSS3规范中找到。
您可以将内容设置为数据属性,然后使用属性选择器,如下所示:
/* Select every cell containing word "male" */
td[data-content="male"] {
color: red;
}
/* Select every cell starting on "p" case insensitive */
td[data-content^="p" i] {
color: blue;
}
/* Select every cell containing "4" */
td[data-content*="4"] {
color: green;
}
<table>
<tr>
<td data-content="Peter">Peter</td>
<td data-content="male">male</td>
<td data-content="34">34</td>
</tr>
<tr>
<td data-conten="Susanne">Susanne</td>
<td data-content="female">female</td>
<td data-content="14">14</td>
</tr>
</table>
您还可以使用jQuery轻松设置数据内容属性:
$(function(){
$("td").each(function(){
var $this = $(this);
$this.attr("data-content", $this.text());
});
});
实际上,有一个非常概念性的基础来说明为什么尚未实现这一点。它基本上是三个方面的组合:
这3个共同意味着,当您拥有文本内容时,您将无法返回到包含元素,也无法为当前文本设置样式。这可能很重要,因为降序仅允许上下文和SAX样式解析的单一跟踪。升序或涉及其他轴的其他选择器引入了对更复杂的遍历或类似解决方案的需求,这将使CSS在DOM中的应用极大地复杂化。
你不得不数据属性添加到所谓的行data-gender
用male
或female
值和使用属性选择:
HTML:
<td data-gender="male">...</td>
CSS:
td[data-gender="male"] { ... }
看起来他们在考虑CSS3规范的问题,但是并没有成功。
:contains()
CSS3选择器http://www.w3.org/TR/css3-selectors/#content-selectors
如果我正确阅读了说明书,否。
您可以匹配元素,元素中属性的名称以及元素中命名属性的值。不过,我看不到任何与内容匹配的元素。
该问题的语法类似于Robot Framework语法。在这种情况下,尽管没有可用于包含的css选择器,但可以使用SeleniumLibrary关键字来代替。在此之前元素等待包含。
例: