是否有包含特定文本的元素的 CSS 选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1520429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a CSS selector for elements containing certain text?
提问by jantimon
I am looking for a CSS selector for the following table:
我正在为下表寻找 CSS 选择器：
Peter | male | 34
Susanne | female | 12
Is there any selector to match all TDs containing "male"?
是否有任何选择器可以匹配所有包含“男性”的 TD？
采纳答案by Dean J
If I read the specificationcorrectly, no.
如果我正确阅读了规范，则不会。
You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element. I don't see anything for matching content within an element, though.
您可以匹配元素、元素中属性的名称以及元素中命名属性的值。但是，我没有看到任何与元素中的内容匹配的内容。
回答by moettinger
Using jQuery:
使用jQuery：
$('td:contains("male")')
回答by Jeff Beaman
Looks like they were thinking about it for the CSS3 spec but it didn't make the cut.
看起来他们正在为 CSS3 规范考虑它，但它没有成功。
:contains()CSS3 selector http://www.w3.org/TR/css3-selectors/#content-selectors
:contains()CSS3 选择器http://www.w3.org/TR/css3-selectors/#content-selectors
回答by Esteban Küber
You'd have to add a data attribute to the rows called data-genderwith a maleor femalevalue and use the attribute selector:
您必须向data-gender使用 amale或female值调用的行添加数据属性并使用属性选择器：
HTML:
HTML：
<td data-gender="male">...</td>
CSS:
CSS：
td[data-gender="male"] { ... }
回答by Matt Whipple
There is actually a very conceptual basis for why this hasn't been implemented. It is a combination of basically 3 aspects:
对于为什么没有实施这一点，实际上有一个非常概念性的基础。它基本上是三个方面的组合：
- The text content of an element is effectively a child of that element
- You cannot target the text content directly
- CSS does not allow for ascension with selectors
- 元素的文本内容实际上是该元素的子元素
- 您不能直接定位文本内容
- CSS 不允许使用选择器提升
These 3 together mean that by the time you have the text content you cannot ascend back to the containing element, and you cannot style the present text. This is likely significant as descending only allows for a singular tracking of context and SAX style parsing. Ascending or other selectors involving other axes introduce the need for more complex traversal or similar solutions that would greatly complicate the application of CSS to the DOM.
这三个一起意味着当您拥有文本内容时，您无法返回包含元素，并且无法设置当前文本的样式。这可能很重要，因为降序只允许对上下文和 SAX 样式解析进行单一跟踪。涉及其他轴的升序或其他选择器引入了对更复杂的遍历或类似解决方案的需求，这将极大地使 CSS 应用到 DOM 变得复杂。
回答by Buksy
You could set content as data attribute and then use attribute selectors, as shown here:
您可以将内容设置为数据属性，然后使用属性选择器，如下所示：
/* 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;
}<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>You can also use jQuery to easily set the data-content attributes:
您还可以使用 jQuery 轻松设置数据内容属性：
$(function(){
$("td").each(function(){
var $this = $(this);
$this.attr("data-content", $this.text());
});
});
回答by user40521
As CSS lacks this feature you will have to use JavaScript to style cells by content. For example with XPath's contains:
由于 CSS 缺少此功能，您将不得不使用 JavaScript 按内容设置单元格样式。例如使用 XPath 的contains：
var elms = document.evaluate( "//td[contains(., 'male')]", node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null )
Then use the result like so:
然后像这样使用结果：
for ( var i=0 ; i < elms.snapshotLength; i++ ){
elms.snapshotItem(i).style.background = "pink";
}
回答by Edwin V.
I'm afraid this is not possible, because the content is no attribute nor is it accessible via a pseudo class. The full list of CSS3 selectors can be found in the CSS3 specification.
恐怕这是不可能的，因为内容不是属性，也不能通过伪类访问。CSS3 选择器的完整列表可以在CSS3 规范中找到。
回答by Matas Vaitkevicius
For those who are looking to do Selenium CSS text selections, this script might be of some use.
对于那些希望进行 Selenium CSS 文本选择的人来说，这个脚本可能会有用。
The trick is to select the parent of the element that you are looking for, and then search for the child that has the text:
诀窍是选择您要查找的元素的父元素，然后搜索具有文本的子元素：
public static IWebElement FindByText(this IWebDriver driver, string text)
{
var list = driver.FindElement(By.CssSelector("#RiskAddressList"));
var element = ((IJavaScriptExecutor)driver).ExecuteScript(string.Format(" var x = $(arguments[0]).find(\":contains('{0}')\"); return x;", text), list);
return ((System.Collections.ObjectModel.ReadOnlyCollection<IWebElement>)element)[0];
}
This will return the first element if there is more than one since it's always one element, in my case.
如果有多个元素，这将返回第一个元素，因为在我的情况下它总是一个元素。
回答by DJDaveMark
I agree the data attribute(voyager's answer) is how it should be handled, BUT, CSS rules like:
我同意数据属性（航海者的回答）是它应该如何处理，但是，CSS 规则如下：
td.male { color: blue; }
td.female { color: pink; }
can often be much easier to set up, especially with client-side libs like angularjs which could be as simple as:
通常可以更容易设置，尤其是像 angularjs 这样的客户端库，它可以像这样简单：
<td class="{{person.gender}}">
Just make sure that the content is only one word! Or you could even map to different CSS class names with:
只要确保内容只有一个字！或者你甚至可以映射到不同的 CSS 类名：
<td ng-class="{'masculine': person.isMale(), 'feminine': person.isFemale()}">
For completeness, here's the data attribute approach:
为了完整起见，这里是数据属性方法：
<td data-gender="{{person.gender}}">
