是否为包含某些文本的元素提供CSS选择器?

CSS

LEYTom

2020-03-18

我正在寻找下表的CSS选择器:

Peter    | male    | 34
Susanne  | female  | 12

是否有任何选择器来匹配所有包含“ male”的TD?

第2050篇《是否为包含某些文本的元素提供CSS选择器?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
神乐Mandy 2020.03.18

该问题的语法类似于Robot Framework语法。在这种情况下,尽管没有可用于包含的css选择器,但可以使用SeleniumLibrary关键字来代替。此之前元素等待包含

例:

Wait Until Element Contains  | ${element} | ${contains}
Wait Until Element Contains  |  td | male
逆天小卤蛋Green 2020.03.18

如果您使用的是Chimp / Webdriver.io,那么它们比CSS规范支持更多的CSS选择器

例如,这将单击包含单词“ Bad bear”的第一个锚点:

browser.click("a*=Bad Bear");
猴子十三小胖 2020.03.18

恐怕这是不可能的,因为内容不是属性,也不能通过伪类访问。CSS3选择器的完整列表可以在CSS3规范中找到

小胖Gil 2020.03.18

您可以将内容设置为数据属性,然后使用属性选择器,如下所示:

/* 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());
  });
});
小小十三泡芙 2020.03.18

实际上,有一个非常概念性的基础来说明为什么尚未实现这一点。它基本上是三个方面的组合:

  1. 元素的文本内容实际上是该元素的子元素
  2. 您不能直接定位文本内容
  3. CSS不允许使用选择器提升

这3个共同意味着,当您拥有文本内容时,您将无法返回到包含元素,也无法为当前文本设置样式。这可能很重要,因为降序仅允许上下文和SAX样式解析的单一跟踪。升序或涉及其他轴的其他选择器引入了对更复杂的遍历或类似解决方案的需求,这将使CSS在DOM中的应用极大地复杂化。

梅Harry 2020.03.18

你不得不数据属性添加到所谓的行data-gendermalefemale值和使用属性选择:

HTML:

<td data-gender="male">...</td>

CSS:

td[data-gender="male"] { ... }
LEY宝儿神奇 2020.03.18

看起来他们在考虑CSS3规范的问题,但是并没有成功

:contains()CSS3选择器http://www.w3.org/TR/css3-selectors/#content-selectors

卡卡西樱 2020.03.18

如果我正确阅读了说明书,否。

您可以匹配元素,元素中属性的名称以及元素中命名属性的值。不过,我看不到任何与内容匹配的元素。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android