我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
当前回答
我同意数据属性(旅行者的答案)是它应该如何处理的,但是,CSS规则如下:
td.male { color: blue; }
td.female { color: pink; }
通常可以更容易地设置,特别是使用像angularjs这样的客户端库,它可以简单到:
<td class="{{person.gender}}">
只要确保内容只有一个词!或者你甚至可以映射到不同的CSS类名:
<td ng-class="{'masculine': person.isMale(), 'feminine': person.isFemale()}">
为了完整起见,下面是数据属性方法:
<td data-gender="{{person.gender}}">
其他回答
@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>;
}
这个问题的语法看起来像Robot Framework语法。 在本例中,虽然没有用于contains的css选择器,但可以使用SeleniumLibrary关键字来代替。 Wait Until元素包含。
例子:
Wait Until Element Contains | ${element} | ${contains}
Wait Until Element Contains | td | male
如果我没看错说明书的话,没有。
您可以在元素上匹配元素中属性的名称和元素中命名属性的值。但是,我没有看到任何用于匹配元素中的内容的东西。
这实际上是一个非常概念性的基础,为什么没有实施。它基本上是三个方面的结合:
元素的文本内容实际上是该元素的子元素 不能直接以文本内容为目标 CSS不允许选择器提升
这三个元素加在一起意味着,当您获得文本内容时,您不能升回包含的元素,也不能为当前文本设置样式。这可能很重要,因为降序只允许对上下文和SAX样式解析进行单一跟踪。升序选择器或其他涉及其他轴的选择器需要更复杂的遍历或类似的解决方案,这将极大地复杂化CSS到DOM的应用程序。
你可以将内容设置为数据属性,然后使用属性选择器,如下所示:
/* Select every cell matching the 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-content="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());
});
});