Есть ли селектор CSS для элементов, содержащих определенный текст?

Вы можете установить контент как атрибут данных, а затем использовать селекторов атрибутов , как показано здесь:

/* 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());
  });
});

Вам необходимо добавить атрибут данных в строки с именем data-gender со значением male или female и использовать селектор атрибута:

HTML:

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

CSS:

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

@ voyager ответ об использовании атрибута data-* (например, data-gender="female|male" - самый эффективный и подход в соответствии со стандартами на 2017 год:

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

). ] можно получить , так как есть некоторые, хотя и ограниченные селекторы, ориентированные вокруг текста. :: first-letter является псевдоэлементом , который может применять ограниченную стилизацию к первой букве. элемента. Существует также псевдоэлемент :: first-line , кроме того, что выбор первой строки элемента (например, абзаца) также подразумевает, что очевидно, что CSS можно использовать для расширения эта существующая возможность стилизовать определенные аспекты textNode.

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

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