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

Peter    | male    | 34
Susanne  | female  | 12

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


当前回答

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

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

其他回答

使用jQuery:

$('td:contains("male")')

这里的大多数答案都试图提供如何编写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>

这实际上是一个非常概念性的基础,为什么没有实施。它基本上是三个方面的结合:

元素的文本内容实际上是该元素的子元素 不能直接以文本内容为目标 CSS不允许选择器提升

这三个元素加在一起意味着,当您获得文本内容时,您不能升回包含的元素,也不能为当前文本设置样式。这可能很重要,因为降序只允许对上下文和SAX样式解析进行单一跟踪。升序选择器或其他涉及其他轴的选择器需要更复杂的遍历或类似的解决方案,这将极大地复杂化CSS到DOM的应用程序。

我同意数据属性(旅行者的答案)是它应该如何处理的,但是,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}}">

我发现属性选项是你最好的选择,如果你不想使用javascript或jquery。

例如,在HTML中,用ready来样式所有的表格单元格:

 <td status*="ready">Ready</td>

然后在css中:

td[status*="ready"] {
        color: red;
    }