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

Peter    | male    | 34
Susanne  | female  | 12

是否有任何选择器来匹配所有包含“男性”的td ?


当前回答

这里的大多数答案都试图提供如何编写HTML代码以包含更多数据的替代方案,因为至少到CSS3为止,您不能通过部分内部文本选择元素。但这是可以做到的,你只需要添加一点普通的JavaScript,注意因为female也包含了male,它会被选中:

细胞=文件 控制台日志(细胞); forEach[]。呼叫(细胞、功能) 如果(el.innerText.indexOf) ! - el。click ();点击或其他选择 控制台日志(el)。 的 }); < table > < tr > 彼得< td > < / td > < td >男< / td > 34 < / td > < td > < / tr > < tr > < td >苏珊< / td > < td >女性< / td > 14 < / td > < td > < / tr > - < table >

<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>

其他回答

你必须添加一个名为data-gender的数据属性,带一个男性或女性值,并使用属性选择器:

HTML:

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

CSS:

td[data-gender="male"] { ... }

@voyager关于使用data-*属性的回答(例如data-gender=“女性|男性”是2017年最有效且符合标准的方法:

[data-gender='male'] {background-color: #000; color: #ccc;}

大多数目标都可以实现,因为有一些尽管有限的选择器面向文本。first-letter是一个伪元素,它可以对元素的第一个字母应用有限的样式。还有一个::first-line伪元素,除了明显地选择元素(如段落)的第一行之外,还意味着很明显可以使用CSS来扩展这种现有功能,以设置textNode的特定方面的样式。

在这种主张成功并实现之前,我能建议的下一个最好的事情是使用空格分隔符爆炸/分割单词,在span元素中输出每个单独的单词,然后如果单词/样式目标是可预测的,则结合使用:n个选择器:

$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
 echo '<span>'.$value1.'</span>;
}

否则如果无法预测,再次使用voyager关于使用data-*属性的答案。一个使用PHP的例子:

$p = explode(' ',$words);
foreach ($p as $key1 => $value1)
{
 echo '<span data-word="'.$value1.'">'.$value1.'</span>;
}

如果你使用的是Chimp / Webdriver。io,他们支持比CSS规范更多的CSS选择器。

例如,这将点击第一个包含“坏熊”字样的锚:

browser.click("a*=Bad Bear");

如果你想对你想要的内容应用样式。简单的技巧。 Td{边框:1px纯黑色;} Td:空{背景:石灰;} Td:empty::after{内容:"male";} <表> < tr > 彼得< td > < / td > < td > < !——男——> < / td > < td > 34道明> < / < / tr > < tr > < td > Susanne td > < / 女性< td > < / td > < td > 14道明> < / < / tr > 表> < /

https://jsfiddle.net/hyda8kqz/

这里的大多数答案都试图提供如何编写HTML代码以包含更多数据的替代方案,因为至少到CSS3为止,您不能通过部分内部文本选择元素。但这是可以做到的,你只需要添加一点普通的JavaScript,注意因为female也包含了male,它会被选中:

细胞=文件 控制台日志(细胞); forEach[]。呼叫(细胞、功能) 如果(el.innerText.indexOf) ! - el。click ();点击或其他选择 控制台日志(el)。 的 }); < table > < tr > 彼得< td > < / td > < td >男< / td > 34 < / td > < td > < / tr > < tr > < td >苏珊< / td > < td >女性< / td > 14 < / td > < td > < / tr > - < table >

<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>