我正在寻找下表的CSS选择器:
Peter | male | 34
Susanne | female | 12
是否有任何选择器来匹配所有包含“男性”的td ?
当前回答
到2021年1月，有一些东西会做到这一点。:有()……只有一个问题:目前还没有任何浏览器支持这个功能
示例:下面的选择器只匹配直接包含子元素的元素:
a:has(> img)
引用:
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
https://caniuse.com/?search=has
其他回答
如果我没看错说明书的话，没有。
您可以在元素上匹配元素中属性的名称和元素中命名属性的值。但是，我没有看到任何用于匹配元素中的内容的东西。
如果你不自己创建DOM(例如在用户脚本中)，你可以用纯JS做以下事情:
(注:文件 console.debug(文本:“文本:”，t.d.， t.d.) td。setAttribute(“文本”,td innerText)。 的 (td . queryctorall) 控制台.debug(“male:”，t.d.， t.d.内文) < table > < tr > 彼得< td > < / td > < td >男< / td > 34 < / td > < td > < / tr > < tr > < td >苏珊< / td > < td >女性< / td > 12 < / td > < td > < / tr > - < table >
控制台输出
text: <td> Peter
text: <td> male
text: <td> 34
text: <td> Susanne
text: <td> female
text: <td> 12
male: <td text="male"> male
如果你想对你想要的内容应用样式。简单的技巧。 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/
我发现属性选项是你最好的选择，如果你不想使用javascript或jquery。
例如，在HTML中，用ready来样式所有的表格单元格:
<td status*="ready">Ready</td>
然后在css中:
td[status*="ready"] {
color: red;
}
恐怕这是不可能的，因为内容没有属性，也不能通过伪类访问。CSS3选择器的完整列表可以在CSS3规范中找到。
