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

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

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

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

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

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

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

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

然后在css中:

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

恐怕这是不可能的，因为内容没有属性，也不能通过伪类访问。CSS3选择器的完整列表可以在CSS3规范中找到。

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

HTML:

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

CSS:

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