Czy istnieje selektor CSS dla elementów zawierających określony tekst?

Szukam selektora CSS dla poniższej tabeli:

Peter    | male    | 34
Susanne  | female  | 12

Czy jest jakiś selektor pasujący do wszystkich niszczycieli czołgów zawierających „mężczyzna”?

Jeśli poprawnie odczytam specyfikację , nie.

Możesz dopasować do elementu, nazwy atrybutu w elemencie i wartości nazwanego atrybutu w elemencie. Nie widzę jednak nic dla pasujących treści w elemencie.

Korzystanie z jQuery:

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

Wygląda na to, że zastanawiali się nad specyfikacją CSS3, ale nie udało się to .

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

Trzeba dodać atrybut danych do wierszy wywoływanych data-genderza pomocą wartości malelub lub femaleużyć selektora atrybutów:

HTML:

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

CSS:

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

Istnieje właściwie bardzo koncepcyjna podstawa, dla której nie zostało to wdrożone. Jest to połączenie zasadniczo 3 aspektów:

1. Treść tekstowa elementu jest faktycznie dzieckiem tego elementu
2. Nie można kierować bezpośrednio na treść tekstu
3. CSS nie pozwala na wstąpienie do selektorów

Te 3 razem oznaczają, że do czasu, gdy masz treść tekstową, nie możesz wrócić do elementu zawierającego i nie możesz stylizować obecnego tekstu. Jest to prawdopodobnie znaczące, ponieważ zejście pozwala jedynie na pojedyncze śledzenie parsowania kontekstu i stylu SAX. Rosnące lub inne selektory obejmujące inne osie wprowadzają potrzebę bardziej złożonych rozwiązań przejścia lub podobnych rozwiązań, które znacznie skomplikowałyby zastosowanie CSS w DOM.

Możesz ustawić zawartość jako atrybut danych, a następnie użyć selektorów atrybutów , jak pokazano tutaj:

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

Możesz także użyć jQuery, aby łatwo ustawić atrybuty danych:

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

Ponieważ CSS nie ma tej funkcji, będziesz musiał użyć JavaScript do stylizowania komórek według zawartości. Na przykład z XPath contains:

var elms = document.evaluate( "//td[contains(., 'male')]", node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null )

Następnie użyj wyniku w następujący sposób:

for ( var i=0 ; i < elms.snapshotLength; i++ ){
   elms.snapshotItem(i).style.background = "pink";
}

https://jsfiddle.net/gaby_de_wilde/o7bka7Ls/9/

Obawiam się, że nie jest to możliwe, ponieważ treść nie jest atrybutem ani nie jest dostępna za pośrednictwem pseudoklasy. Pełna lista selektorów CSS3 znajduje się w specyfikacji CSS3 .

Dla tych, którzy chcą wybierać tekst Selenium CSS, ten skrypt może się przydać.

Sztuką jest wybranie elementu nadrzędnego poszukiwanego elementu, a następnie wyszukanie elementu podrzędnego zawierającego tekst:

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

Zwróci pierwszy element, jeśli jest więcej niż jeden, ponieważ w moim przypadku zawsze jest to jeden element.

Zgadzam się, że atrybut danych (odpowiedź podróżnika) jest taki, jak powinien być traktowany, ALE, reguły CSS, takie jak:

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

często może być znacznie łatwiejsze do skonfigurowania, szczególnie w bibliotekach po stronie klienta, takich jak angularjs, które mogą być tak proste, jak:

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

Upewnij się, że treść jest tylko jednym słowem! Lub możesz nawet mapować na różne nazwy klas CSS za pomocą:

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

Dla kompletności, oto podejście do atrybutu danych:

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

Odpowiedź @ voyagera na temat używania data-*atrybutu (np. data-gender="female|male"jest najbardziej skutecznym i zgodnym ze standardami podejściem od 2017 r .:

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

Niemal większość celów można osiągnąć, ponieważ istnieją pewne, choć ograniczone selektory zorientowane na tekst. :: first-letter jest pseudo-element , który można zastosować ograniczoną stylizacji do pierwszej litery elementu. Istnieje również :: pierwsza linia pseudoelement poza oczywistym wybraniem pierwszego wiersza elementu (takiego jak akapit), sugeruje również, że jest oczywiste, że CSS można wykorzystać do rozszerzenia tej istniejącej możliwości na stylizowanie określonych aspektów textNode .

Dopóki takie poparcie nie odniesie sukcesu i nie zostanie wdrożone, następną najlepszą rzeczą, którą mogę zasugerować, gdy ma to zastosowanie, jest explode/ splitsłowa przy użyciu separatora spacji, wypisz każde pojedyncze słowo wewnątrz spanelementu, a następnie, jeśli cel słowa / stylu jest przewidywalny, użyj w połączeniu z : n-tymi selektorami :

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

W przeciwnym razie skorzystaj z odpowiedzi podróżnika na temat użycia data-*atrybutu. Przykład użycia PHP:

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

Jeśli używasz Chimp / Webdriver.io , obsługują one znacznie więcej selektorów CSS niż specyfikacja CSS.

Spowoduje to na przykład kliknięcie pierwszej kotwicy zawierającej słowa „Zły niedźwiedź”:

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

Większość odpowiedzi tutaj stanowi alternatywę dla pisania kodu HTML w celu uwzględnienia większej ilości danych, ponieważ przynajmniej do CSS3 nie można wybrać elementu przez częściowy tekst wewnętrzny. Ale można to zrobić, wystarczy dodać trochę waniliowego JavaScript, zauważ, ponieważ kobieta zawiera również mężczyznę, zostanie wybrana:

      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>

Opcja atrybutu jest dla mnie najlepszym rozwiązaniem, jeśli nie chcesz używać javascript ani jquery.

Np. Aby stylizować wszystkie komórki tabeli słowem „gotowe”, w HTML wykonaj następujące czynności:

 <td status*="ready">Ready</td>

Następnie w css:

td[status*="ready"] {
        color: red;
    }

Możesz również używać contentz attr()komórkami tabeli i stylami, które są ::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>

A ZeroWidthSpacesłuży do zmiany koloru i może być dodany za pomocą waniliowego JavaScript:

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

Chociaż <td>znacznik końca s może zostać pominięty , może to spowodować, że będzie traktowane jako niepuste.

Jeśli nie utworzysz DOM samodzielnie (np. W skrypcie użytkownika), możesz wykonać następujące czynności z czystym JS:

for ( td of document.querySelectorAll('td') ) {
  console.debug("text:", td, td.innerText)
  td.setAttribute('text', td.innerText)
}
for ( td of document.querySelectorAll('td[text="male"]') )
  console.debug("male:", td, td.innerText)

<table>
  <tr>
    <td>Peter</td>
    <td>male</td>
    <td>34</td>
  </tr>
  <tr>
    <td>Susanne</td>
    <td>female</td>
    <td>12</td>
  </tr>
</table>

Wyjście konsoli

text: <td> Peter
text: <td> male
text: <td> 34
text: <td> Susanne
text: <td> female
text: <td> 12
male: <td text="male"> male

Robienie takich małych widgetów filtrujących:

    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')
            }
        })
    })

Składnia tego pytania wygląda jak składnia Robot Framework. W takim przypadku, chociaż nie ma selektora css, którego można użyć, zawiera słowo kluczowe SeleniumLibrary, którego można użyć zamiast tego. Element Wait Until zawiera .

Przykład:

Wait Until Element Contains  | ${element} | ${contains}
Wait Until Element Contains  |  td | male