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

Peter    | male    | 34
Susanne  | female  | 12

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


当前回答

看起来他们是在考虑CSS3规范,但它没有被削减。

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

其他回答

由于CSS缺乏这一特性,您将不得不使用JavaScript按内容设置单元格样式。例如,XPath的包含:

var elms = document.evaluate( "//td[contains(., 'male')]", node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null )

然后像这样使用结果:

for ( var i=0 ; i < elms.snapshotLength; i++ ){
   elms.snapshotItem(i).style.background = "pink";
}

https://jsfiddle.net/gaby_de_wilde/o7bka7Ls/9/

如果你想对你想要的内容应用样式。简单的技巧。 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/

看起来他们是在考虑CSS3规范,但它没有被削减。

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

@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");