Ich suche einen CSS-Selektor für die folgende Tabelle:
Peter | male | 34
Susanne | female | 12
Gibt es einen Selektor für alle TDs, die "männlich" enthalten?
css
css-selectors
jantimon
quelle
quelle
$x
beantwortet die frage. für die ursprüngliche Frage$x("//td[text()='male']")
macht der TrickAntworten:
Wenn ich die Spezifikation richtig gelesen habe , nein.
Sie können ein Element, den Namen eines Attributs im Element und den Wert eines benannten Attributs in einem Element abgleichen. Ich sehe jedoch nichts, um Inhalte innerhalb eines Elements abzugleichen.
quelle
:empty
.Verwenden von jQuery:
quelle
Sieht so aus, als hätten sie für die CSS3-Spezifikation darüber nachgedacht, aber es hat den Schnitt nicht geschafft .
:contains()
CSS3-Selektor http://www.w3.org/TR/css3-selectors/#content-selectorsquelle
Looks like they were thinking about it for the CSS3 spec but it didn't make the cut.
Und aus gutem Grund würde dies die gesamte Prämisse der Trennung von Stil, Inhalt, Struktur und Verhalten verletzen.Sie müssten den
data-gender
mit amale
oderfemale
value aufgerufenen Zeilen ein Datenattribut hinzufügen und den Attributselektor verwenden:HTML:
CSS:
quelle
male
oderfemale
? Die Tatsache, dassclass
mit anderen Klassen gefüllt ist, deren Reihenfolge nicht garantiert ist, es kann zu Kollisionen mit anderen Klassennamen usw. kommen, machtclass
einen schlechteren Ort für diese Art von Sachen. Ein dediziertesdata-*
Attribut isoliert Ihre Daten von all dem Zeug und erleichtert das teilweise Abgleichen usw. mithilfe von Attributselektoren.Es gibt tatsächlich eine sehr konzeptionelle Grundlage dafür, warum dies nicht implementiert wurde. Es ist eine Kombination von im Grunde 3 Aspekten:
Diese 3 zusammen bedeuten, dass Sie zu dem Zeitpunkt, an dem Sie den Textinhalt haben, nicht mehr zum enthaltenen Element aufsteigen und den vorliegenden Text nicht formatieren können. Dies ist wahrscheinlich von Bedeutung, da der Abstieg nur eine singuläre Verfolgung des Kontexts und der Analyse im SAX-Stil ermöglicht. Aufsteigende oder andere Selektoren, an denen andere Achsen beteiligt sind, erfordern komplexere Durchquerungs- oder ähnliche Lösungen, die die Anwendung von CSS auf das DOM erheblich erschweren würden.
quelle
text()
Funktion verwenden.:contains(<sub-selector>)
ein Element auswählen, das andere spezifische Elemente enthält. Wiediv:contains(div[id~="bannerAd"])
auf der Anzeige loszuwerden und es des Containers.Sie können den Inhalt als Datenattribut festlegen und dann Attributselektoren verwenden , wie hier gezeigt:
Sie können auch jQuery verwenden, um die Dateninhaltsattribute einfach festzulegen:
quelle
.text()
und.textContent
sind ziemlich schwer, versuchen Sie, sie in langen Listen oder großen Texten zu vermeiden, wenn möglich..html()
und.innerHTML
sind schnell.$("td:contains(male)")
contenteditable='true'
- in meinem Fall), reicht es nicht aus, den Wert desdata-content
Attributs festzulegen, bevor die Seite gerendert wird. Es muss ständig aktualisiert werden. Hier was ich benutze:<td onkeypress="event.target.setAttribute('data-content', event.target.textContent);">
Da CSS diese Funktion nicht bietet, müssen Sie JavaScript verwenden, um Zellen nach Inhalt zu formatieren. Zum Beispiel mit XPaths
contains
:Verwenden Sie dann das Ergebnis wie folgt:
https://jsfiddle.net/gaby_de_wilde/o7bka7Ls/9/
quelle
Ich fürchte, dies ist nicht möglich, da der Inhalt weder ein Attribut ist noch über eine Pseudoklasse zugänglich ist. Die vollständige Liste der CSS3-Selektoren finden Sie in der CSS3-Spezifikation .
quelle
Für diejenigen, die Selenium CSS-Text auswählen möchten, kann dieses Skript von Nutzen sein.
Der Trick besteht darin, das übergeordnete Element des gesuchten Elements auszuwählen und dann nach dem untergeordneten Element zu suchen, das den Text enthält:
Dies gibt das erste Element zurück, wenn es mehr als ein Element gibt, da es in meinem Fall immer ein Element ist.
quelle
TD:contains('male')
wenn Sie Selenium verwenden: imho verwenden Sie es nur, wenn Sie die Quelle nicht aktualisieren können, um Klassen hinzuzufügen. zB wenn Sie Legacy-Code testen oder Ihr Unternehmen Sie nicht mit den Entwicklern sprechen lässt (eurgh!), weil Ihre Tests brüchig sind und brechen, wenn jemand den Text später inmasculine
oder in die Sprache ändert. SauceLabs docs zeigt die Verwendung voncontains
hier ( saucelabs.com/resources/articles/selenium-tips-css-selectors ) + cc @matas vaitkevicius habe ich etwas verpasst?Ich bin damit einverstanden, dass das Datenattribut (die Antwort des Reisenden) lautet, wie es behandelt werden soll, ABER CSS-Regeln wie:
kann oft viel einfacher einzurichten sein, insbesondere bei clientseitigen Bibliotheken wie anglejs, die so einfach sein können wie:
Stellen Sie einfach sicher, dass der Inhalt nur ein Wort ist! Oder Sie können sogar verschiedenen CSS-Klassennamen zuordnen mit:
Der Vollständigkeit halber ist hier der Datenattributansatz:
quelle
Antwort von @ voyager zur Verwendung von
data-*
Attributen (z. B.data-gender="female|male"
der effektivste und standardkonformste Ansatz ab 2017:Die meisten Ziele können erreicht werden, da es einige, wenn auch begrenzte Selektoren gibt, die sich an Text orientieren. Der :: first-letter ist ein Pseudo-Element , die begrenzte Styling mit dem ersten Buchstaben eines Elements anwenden kann. Es gibt auch ein :: First-Line -Pseudoelement, neben der offensichtlichen Auswahl der ersten Zeile eines Elements (z. B. eines Absatzes) impliziert dies auch, dass es offensichtlich ist, dass CSS verwendet werden könnte, um diese vorhandene Fähigkeit zu erweitern, um bestimmte Aspekte eines textNode zu formatieren .
Bis zur Befürwortung erfolgreich und ist die nächste beste Sache umgesetzt ich vorschlagen könnte , wenn anwendbar ist
explode
/split
Worte einen Raum deliminator, Ausgang jedes einzelne Wort im Innern eines mitspan
Elemente und dann , wenn das Wort / Ziel Styling ist vorhersehbar Verwendung in Kombination mit : n Selektoren ::Andernfalls, wenn dies nicht vorhersehbar ist , verwenden Sie erneut die Antwort des Voyagers zur Verwendung von
data-*
Attributen. Ein Beispiel mit PHP:quelle
Wenn Sie Chimp / Webdriver.io verwenden , unterstützen sie viel mehr CSS-Selektoren als die CSS-Spezifikation.
Dies wird zum Beispiel auf den ersten Anker klicken, der die Worte "Bad Bear" enthält:
quelle
Die meisten Antworten hier versuchen, eine Alternative zum Schreiben des HTML-Codes anzubieten, um mehr Daten aufzunehmen, da Sie zumindest bis zu CSS3 kein Element durch partiellen inneren Text auswählen können. Aber es kann getan werden, Sie müssen nur ein bisschen Vanille-JavaScript hinzufügen, beachten Sie, da weiblich auch männlich enthält, wird es ausgewählt:
quelle
Ich finde die Attributoption die beste Wahl, wenn Sie kein Javascript oder keine Abfrage verwenden möchten.
Um beispielsweise alle Tabellenzellen mit dem Wort bereit zu formatieren, gehen Sie in HTML folgendermaßen vor:
Dann in CSS:
quelle
Sie können auch verwenden ,
content
mitattr()
und Stil Tabellenzellen , die sind ::not
:empty
A
ZeroWidthSpace
wird zum Ändern der Farbe verwendet und kann mit Vanille-JavaScript hinzugefügt werden:Obwohl das
<td>
s-End-Tag möglicherweise weggelassen wird , kann dies dazu führen, dass es als nicht leer behandelt wird.quelle
Wenn Sie das DOM nicht selbst erstellen (z. B. in einem Userscript), können Sie mit reinem JS Folgendes tun:
Konsolenausgabe
quelle
Kleine Filter-Widgets wie folgt ausführen:
quelle
Die Syntax dieser Frage ähnelt der Robot Framework-Syntax. In diesem Fall gibt es, obwohl es keinen CSS-Selektor gibt, für den Sie enthalten können, ein SeleniumLibrary-Schlüsselwort, das Sie stattdessen verwenden können. Das Element Warten bis enthält .
Beispiel:
quelle