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

如果我读了 the specification 没错,没有。

可以匹配元素、元素中属性的名称以及元素中命名属性的值。不过,我看不到任何匹配元素中内容的内容。

使用jQuery:

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

看起来他们在考虑CSS3规范 但它没有造成割伤 .

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

您必须向调用的行添加一个数据属性 data-gender 用一个 male 或 female 值并使用属性选择器:

HTML:

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

CSS:

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

事实上,这是一个非常概念化的基础,为什么没有实现。它主要由三个方面组成:

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

这3个一起意味着,当您拥有文本内容时,您不能提升回包含元素,并且您不能设置当前文本的样式。这可能很重要,因为降序只允许对上下文和SAX风格的解析进行单一的跟踪。升序选择器或涉及其他轴的其他选择器引入了对更复杂的遍历或类似解决方案的需求,这些解决方案将使CSS在DOM中的应用变得非常复杂。

您可以将内容设置为数据属性,然后使用 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());
  });
});

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

对于那些希望选择SeleniumCSS文本的人来说,这个脚本可能有一些用处。

技巧是选择要查找的元素的父元素,然后搜索具有文本的子元素:

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

如果有多个元素,这将返回第一个元素,因为在我的例子中,它总是一个元素。

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

@旅行者关于使用的答案 data-* 属性(例如 data-gender="female|male" 是最有效的 符合标准 截至2017年的方法:

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

几乎大多数目标 可以 因为有一些面向文本的尽管有限的选择器。这个 ::first-letter 是一个 pseudo-element 它可以对元素的第一个字母应用有限的样式。还有一个 ::first-line 伪元素除了明显地选择元素的第一行(如段落)外,还意味着很明显,CSS可以用来扩展现有的功能,以设计文本节点的特定方面。

直到这种宣传成功 和 在适用的情况下,我能建议的下一个最好的方法是 explode / split 单词使用空格除颤器,输出 span 元素,然后如果单词/样式目标 是可预测的 与一起使用 :nth selectors :

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

否则 如果不可预测 再次使用旅行者关于使用 数据* 属性。使用PHP的示例:

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

我同意 the data attribute (旅行者的答案)是应该如何处理,但是,CSS规则如下:

td.male { color: blue; }
td.female { color: pink; }

通常可以更容易地设置,特别是使用客户端libs(如angularjs),它可以简单到:

<td class="{{person.gender}}">

只需确保内容只有一个字!或者你甚至可以映射到不同的CSS类名:

<td ng-class="{'masculine': person.isMale(), 'feminine': person.isFemale()}">

为了完整性,下面是数据属性方法:

<td data-gender="{{person.gender}}">

你也可以用 content 具有 attr() 以及样式表单元格 :not :empty :

th::after { content: attr(data-value) }
td::after { content: attr(data-value) }
td[data-value]:not(:empty) {
  color: fuchsia;
}

<table>
  <tr>
    <th data-value="Peter"></th>
    <td data-value="male">&#x0200B;</td>
    <td data-value="34"></td>
  </tr>
  <tr>
    <th data-value="Susanne"></th>
    <td data-value="female"></td>
    <td data-value="12"></td>
  </tr>
  <tr>
    <th data-value="Lucas"></th>
    <td data-value="male">&#x0200B;</td>
    <td data-value="41"></td>
  </tr>
</table>

一 ZeroWidthSpace 用于更改颜色,可以使用普通javascript添加:

const hombres = document.querySelectorAll('td[data-value="male"]');
hombres.forEach(hombre => hombre.innerHTML = '​');

虽然 <td> S端标签 may be omitted 这样做可能会导致它被视为非空的。

这里的大多数答案都试图提供如何编写HTML代码以包含更多数据的替代方法,因为至少在CSS3之前,不能通过部分内部文本选择元素。但是可以做到的是,你只需要添加一些普通的javascript,注意,因为女性也包含男性,所以会选择:

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

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

如果你在用 Chimp / Webdriver.io ,他们 support a lot more CSS selectors 而不是CSS规范。

例如,这将单击包含单词“bad bear”的第一个锚:

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

执行这样的小过滤器小部件:

    var searchField = document.querySelector('HOWEVER_YOU_MAY_FIND_IT')
    var faqEntries = document.querySelectorAll('WRAPPING_ELEMENT .entry')

    searchField.addEventListener('keyup', function (evt) {
        var testValue = evt.target.value.toLocaleLowerCase();
        var regExp = RegExp(testValue);

        faqEntries.forEach(function (entry) {
            var text = entry.textContent.toLocaleLowerCase();

            entry.classList.remove('show', 'hide');

            if (regExp.test(text)) {
                entry.classList.add('show')
            } else {
                entry.classList.add('hide')
            }
        })
    })