是否有包含某些文本的元素的CSS选择器？

Question

我要寻找一个CSS选择如下表：

Peter | male | 34 
Susanne | female | 12 

是否有任何选择，以匹配包含“男性”的所有TD？

Answer 1

如果我正确地读了the specification，没有。

您可以匹配元素，元素中的属性名称和元素中命名属性的值。尽管如此，我没有看到任何匹配内容的内容。

Answer 2

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

Answer 3

你必须添加一个数据属性，称为data-gender与male或female值的行和使用属性选择：

HTML：

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

CSS：

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

Answer 4

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

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

Answer 5

使用jQuery：

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

Answer 6

其实是有为什么这并没有得到落实非常概念基础。它的主要三个方面的结合：

1. 元素的文本内容实际上是该元素
2. 的孩子你不能针对文本内容直接
3. CSS不允许有选择
提升

这3个表示当你有文本内容时，你不能上升回到包含的元素，并且你不能设置当前文本的样式。这可能很重要，因为降序只允许对上下文和SAX样式解析进行单独跟踪。包含其他轴的升序或其他选择器引入了更复杂的遍历或类似解决方案的需求，这将使CSS在DOM上的应用大大复杂化。

Answer 7

对于那些想要做Selenium CSS文本选择的人来说，这个脚本可能有些用处。

关键是要选择您正在寻找的元素的父，然后搜索具有文本孩子：

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]; 
} 

这将返回的第一个元素，如果有不止一个因为它总是一个元素，就我而言。

Answer 8

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

Answer 9

的数据属性您可以设置内容，然后用attribute selectors

/* 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>

您还可以使用jQuery来轻松地设置该数据内容属性

$(function(){ 
    $("td").each(function(){ 
    var $this = $(this); 
    $this.attr("data-content", $this.text()); 
    }); 
}); 

Answer 10

@航海者的回答有关使用data-*属性（例如data-gender="female|male"是最有效和符合标准方法2017年：

[data-gender='male'] {background-color: #000; color: #ccc;} 

差不多进球最多可以来实现，因为有一些虽然周围的面向文本的有限选择。 ::first-letter是一个pseudo-element，可以将有限的样式应用于元素的第一个字母。还有一个::first-line伪元素，除了明显选择元素的第一行（例如段落）之外，还意味着可以使用CSS来扩展此现有功能以设置textNode的特定方面。

在此之前的宣传成功和实现应用时是使用空间deliminator explode/split的话，输出span元素中，然后如果字/造型的目标每一个人的话，我可以建议退而求其次是组合预测的使用与:nth selectors：

$p = explode(' ',$words); 
foreach ($p as $key1 => $value1) 
{ 
echo '<span>'.$value1.'</span>; 
} 

否则如果没有预见到再次使用航行者的有关使用data-*属性的答案。一个例子使用PHP：

$p = explode(' ',$words); 
foreach ($p as $key1 => $value1) 
{ 
echo '<span data-word="'.$value1.'">'.$value1.'</span>; 
} 

Answer 11

我同意the data attribute（航海的答案）是应该如何来处理，但是，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}}"> 

Answer 12

这里的大多数答案尝试提供替代方案怎么写HTML代码包含更多的数据，因为至少达到CSS3你不能通过部分内部文本选择一个元素。不过，这是可以做到，你只需要添加一点香草的JavaScript，通知自女性还含有男性会选择：

 cells = document.querySelectorAll('td'); 
 
    \t console.log(cells); 
 
     [].forEach.call(cells, function (el) { 
 
    \t if(el.innerText.indexOf("male") !== -1){ 
 
    \t //el.click(); click or any other option 
 
    \t console.log(el) 
 
    \t } 
 
    });

<table> 
 
     <tr> 
 
     <td>Peter</td> 
 
     <td>male</td> 
 
     <td>34</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Susanne</td> 
 
     <td>female</td> 
 
     <td>14</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> 

Answer 13

如果您使用Chimp/Webdriver.io，他们support a lot more CSS selectors比CSS规范。

这一点，例如，会点击一个包含词语“坏熊”第一锚：

browser.click("a*=Bad Bear"); 

Answer 14

我有一些不好的HTML同样的问题。所有数据保存在<td>标签中，没有附加标识信息。

注意：这只适用于因为随后的<td>文本始终包含前面的<td>文本的“值”。

我正在寻找芝加哥所有CTA电台的地址。我有一个带站号的数据库，所以我可以用下面的代码创建一个将站号连接到地址的散列。

td_hash = {} 
filename = Rails.root + "cta_geojson.geojson" 
page = open(filename) 
parsed_json = JSON.parse(page.read) 
q = parsed_json['features'].map {|e| e['properties']['description'] } #description was a string of badly formed HTML 
q.each do |station| 
    doc = Nokogiri::HTML(station) 
    td = doc.css("td") #collect the td's 
    s_address = 0 #address selector. This goes to 1 when the <td> text is "ADDRESS" becase we know the address is in the next <td> 
    s_gtfs = 0 #gtfs selector. This goes to 1 when the <td> text is "GTFS" because we know the cta number is in the next <td> 
    key = '' 
    value = '' 
    td.each do |td| 
    if s_address == 1 
     value = td.text 
     s_address = 0 
    end 
    if s_gtfs == 1 
     key = td.text 
     td_hash.store(key,value) 
     s_gtfs = 0 
    end 
    if td.text == "ADDRESS" 
     s_address = s_address + 1 
    end 
    if td.text == "GTFS" 
     s_gtfs = s_gtfs + 1 
    end 
    end 
end