我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
当前回答
你必须添加一个名为data-gender的数据属性,带一个男性或女性值,并使用属性选择器:
HTML:
<td data-gender="male">...</td>
CSS:
td[data-gender="male"] { ... }
其他回答
使用jQuery:
$('td:contains("male")')
由于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/
你可以将内容设置为数据属性,然后使用属性选择器,如下所示:
/* 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());
});
});
我同意数据属性(旅行者的答案)是它应该如何处理的,但是,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}}">
看起来他们是在考虑CSS3规范,但它没有被削减。
:contains() CSS3选择器http://www.w3.org/TR/css3-selectors/#content-selectors