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

Question

szukam selektora CSS w poniższej tabeli:

Peter | male | 34 
Susanne | female | 12 

Czy istnieje selektor dopasować wszystkie TDS zawierające „męski”?

Answer 1

Jeśli poprawnie odczytam the specification, nie.

Można dopasować element, nazwę atrybutu w elemencie i wartość nazwanego atrybutu w elemencie. Jednak nie widzę niczego, co pasuje do treści w obrębie elementu.

Answer 2

Obawiam się, że nie jest to możliwe, ponieważ treść nie jest atrybutem ani nie jest dostępna za pośrednictwem pseudoklasy. Pełną listę selektorów CSS3 można znaleźć w the CSS3 specification.

Answer 3

Trzeba dodać atrybut danych do wierszy zwanych data-gender z male lub female wartości i użyć selektora atrybutu:

HTML:

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

CSS:

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

Answer 4

Wygląda na to, że myśleli o tym dla specyfikacji CSS3 , ale nie spowodowało to cięcia.

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

Answer 5

jQuery:

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

Answer 6

Jest rzeczywiście bardzo koncepcyjny podstawą dlaczego to nie zostało zrealizowane. Jest to kombinacja basically 3 aspektach:

1. Zawartość tekst elementu jest skutecznie dzieckiem tego elementu
2. Nie można kierować na zawartość tekstową bezpośrednio
3. CSS nie pozwala na wniebowstąpieniu z selektorów

Te 3 razem oznaczają, że do czasu, gdy masz zawartość tekstową, nie możesz wznieść się z powrotem do elementu zawierającego i nie możesz zmienić stylu bieżącego tekstu. Jest to prawdopodobnie znaczące, ponieważ opuszczanie pozwala tylko na pojedyncze śledzenie kontekstu i parsowanie stylu SAX. Rosnąco lub inne selektory obejmujące inne osie wprowadzają potrzebę bardziej złożonych rozwiązań lub podobnych rozwiązań, które znacznie komplikują zastosowanie CSS do DOM.

Answer 7

Dla tych, którzy szukają selekcji tekstu selekcji CSS, ten skrypt może być przydatny.

Sztuką jest wybrać nadrzędny element, który szukasz, a następnie szukał Dziecięcia, które ma 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]; 
} 

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

Answer 8

Ponieważ w CSS brakuje tej funkcji, będziesz musiał używać javascript do stylu komórek według treści. Na przykład z XPath zawiera

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

Następnie użyj wynik tak:

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

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

Answer 9

Można ustawić zawartość jako atrybut danych, a następnie użyć 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>

Można również użyć jQuery łatwo ustawić te dane-content atrybuty

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

Answer 10

@ odpowiedź Voyagera o użyciu atrybutu data-* (np data-gender="female|male" jest najbardziej skuteczny i zgodny z normami podejście jak z 2017 roku:

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

Prawie większość goli może zostać osiągnięte, ponieważ istnieją pewne aczkolwiek ograniczonych selektorów zorientowanych wokół tekstu. Model ::first-letter to pseudo-element, który może stosować ograniczoną stylizację do pierwszej litery elementu. Istnieje również pseudoelement ::first-line oprócz oczywistego wybrania pierwszego wiersza elementu (takiego jak akapit), co oznacza również, że CSS może zostać użyty do rozszerzenia tej istniejącej możliwości, aby stylować określone aspekty węzła textNode.

Do takich rzecznictwo powiedzie i jest realizowana następnego najlepszą rzeczą mógłbym zasugerować, kiedy stosowane jest explode/split słowy wykorzystaniem deliminator przestrzeń, wyjście każdy indywidualny wyraz wewnątrz elementu span i wtedy, gdy słowo/stylizacji cel jest przewidywalny stosowanie w połączeniu z :nth selectors:

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

Else jeśli nie przewidywalny aby ponownie użyć Voyager za odpowiedź na temat korzystania atrybut data-*. Przykładem użyciem PHP:

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

Answer 11

zgadzam the data attribute (odpowiedź Voyagera) jest to, jak powinien być traktowany, ale CSS, takie jak:

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

często może być znacznie łatwiej ustawić w górę, szczególnie w przypadku bibliotek klienckich takich jak angularjs, które mogą być tak proste, jak:

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

Tylko upewnij się, że treść jest tylko jednym słowem!Lub można nawet mapować do różnych nazw klas CSS z:

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

pod względem kompletności, tutaj podejście przypisywać dane:

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

Answer 12

Większość odpowiedzi tutaj staramy się zaoferować alternatywę dla jak napisać kod HTML kod, aby dodać więcej danych, ponieważ przynajmniej do CSS3 nie można wybrać elementu za pomocą częściowego tekstu wewnętrznego. Ale można to zrobić, wystarczy dodać trochę wanilii JavaScript, zawiadomienie zawiera także ponieważ samica samiec zostanie wybrany:

 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

Jeśli używasz Chimp/Webdriver.io, one support a lot more CSS selectors niż specyfikacja CSS.

to, na przykład, kliknij na pierwszej kotwicy, która zawiera słowa „Bad niedźwiedzia”:

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

Answer 14

miałem ten sam problem z jakimś źle utworzonego html. Wszystkie dane przechowywane na etykietach <td> bez dodatkowych informacji identyfikacyjnych.

Uwaga: działa to tylko dlatego, że następny tekst <td> zawsze zawierał "wartość" poprzedniego tekstu <td>.

Szukałem adresów dla wszystkich stacji CTA w Chicago. Miałem bazę danych z numerem stacji, więc udało mi się utworzyć hasz łączący numer stacji z adresem z poniższym kodem.

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