是否有包含特定文本的元素的CSS选择器？

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

Peter    | male    | 34
Susanne  | female  | 12

是否有任何选择器匹配所有包含"男性"的TD？

1> Dean J..：

---

如果我正确阅读了规范,没有.

您可以匹配元素,元素中属性的名称以及元素中命名属性的值.但是,我没有看到任何元素内的匹配内容.

---

有一个边缘案例:`:empty`.

---

回答我自己的问题:是的,今天仍然如此!内容选择器已弃用!自CSS3以来没有更多的内容选择器.(https://www.w3.org/TR/css3-selectors/#selectors)

2> moettinger..：

---

使用jQuery:

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

---

除了不是CSS,那就是JavaScript.

---

但是fe*male*这个词本身也包含"男性"这个词吗？它的工作原理只是'男性是第一位的吗？如果重新订购错误等待发生？

---

同意 - 这就是为什么我的回答说我使用的是jQuery,而不是CSS.但我的答案的那部分已被删除.=)

---

结束需要与此相反,即:jQuery(element).not(":contains('string')")

---

@Michael Durrant:你开玩笑,但是跨元素字符串匹配(这是一个比同一元素中常规子字符串匹配更大的问题)实际上是最大的原因之一:contains()被删除了.

3> 小智..：

---

看起来他们正在考虑CSS3规范,但它并没有削减.

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

---

@Synetech它实际上可以帮助将样式与内容分离,因为这意味着内容不需要知道它的客户端将被认为是基于样式的重要.现在我们的html内容通常与css紧密配对,包括我们知道styler关心的类.他们已经转向在内容中使用CSS,CSS3中的属性值选择器就是证明.

---

`看起来他们正在为CSS3规范考虑它,但它没有削减.而且有充分的理由,它会违反分离样式,内容,结构和行为的整个前提.

---

@Synetech,究竟是什么"行为"？对我而言,这是一个介绍问题.它不会*做任何事情 - 它以某种方式呈现*某些类型的内容.

---

@BarbaraKwarc，那不是我说的。查找网页设计原理。在良好的网页设计中，应将样式包含在CSS文件中，数据库中的内容，HTML文件中的结构以及JavaScript文件中的行为。理想情况下，您不应该混合使用它们。在这种情况下，混合的不是行为，而是样式和内容（将内容放入样式中）。这很糟糕，因为一方面，由于有了i18n，它使事情变得复杂。例如，对于您支持的每种语言，您都会有一个单独的CSS条目吗？

---

@DannyMeister，哦，您不必说服我。几年后，我回到自己的位置，同时试图寻找确切的功能，但不但不知道它不存在，而且被拒绝了。eBay只是更改了用户界面，使他们的网站很难使用。我正在尝试使用用户样式表进行修复，但其标记无法区分拍卖和BIN列表，因此，突出显示列表中出价数量的唯一方法是通过元素的文本内容进行匹配。说服某人是让他们亲身体验用例场景所需要的。

---

为了确保内容和样式之间的良好分离，我们将没有：contains（）选择器。因此，我们将不根据其内容为单元格样式（例如，“打开”或“已解决”的“状态”列），而是在显示属性和类属性中复制内容，然后在该属性上进行选择。优秀！

4> Esteban Kübe..：

---

你不得不数据属性添加到所谓的行data-gender用male或female值和使用属性选择:

HTML:

...

CSS:

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

---

使用Javascript和CSS自定义数据属性是完全可以的.请参阅[MDN使用数据属性](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes)

5> Matt Whipple..：

---

实际上有一个非常概念性的基础,为什么没有实现这一点.它基本上是3个方面的组合:

元素的文本内容实际上是该元素的子元素

您无法直接定位文本内容

CSS不允许使用选择器提升

这三个一起意味着,当您拥有文本内容时,您无法提升回包含元素,并且您无法设置当前文本的样式.这可能很重要,因为降序只允许单一跟踪上下文和SAX样式解析.涉及其他轴的升序或其他选择器引入了对更复杂的遍历或类似解决方案的需求,这将使CSS的应用极大地复杂化.

---

这是真的.这就是XPath的用途.如果你可以在JS/jQuery或解析库中执行选择器(而不是仅CSS),那么就可以使用XPath的`text()`函数.

6> Buksy..：

---

您可以将内容设置为数据属性,然后使用属性选择器,如下所示:

/* Select every cell containing 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;
}

  

    
Peter
    
male
    
34
  
  

    
Susanne
    
female
    
14
  

7> user40521..：

---

由于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/

---

由于您无法通过CSS中的内容进行选择，因此您将不得不使用js来做到这一点。当您指出这不是CSS时，就正确了，但data属性的使用并非按内容选择。我们只能猜测为什么读者希望按内容选择单元格，对html有什么样的访问权限，有多少匹配项，表格有多大等等。

8> 小智..：

---

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