Warum funktioniert der Selektor h3: nth-child (1): enthält (‘a’) nicht?

Ich überprüfe diesen Selektor:

h3:nth-child(1):contains('a') 

Selektor funktioniert nicht?

Ich überprüfe das im Firefinder und gebe nichts zurück (keine Information, dass es keine Elemente gibt)

Dann überprüfe das:

 h3:nth-child(1) 

und es gibt h3 zurück, so Selektor ist fast gut, aber etwas mit diesem (h3 hat Text ‘a’) Text geht schief.

Solutions Collecting From Web of "Warum funktioniert der Selektor h3: nth-child (1): enthält (‘a’) nicht?"

:contains() ist nicht würde ein CSS3-Selektor sein ( danke TJ Crowder für den Link ), aber es hat es nicht geschafft, höchstwahrscheinlich, weil die Art und Weise, wie es funktioniert, zu schwerwiegenden Performance- und Überauswahlproblemen führt. Wenn zum Beispiel ein Element E mit :contains() für ein gegebenes String-Argument übereinstimmt, würden auch alle seine Vorfahren übereinstimmen; Die Verwendung eines universellen Selektors würde zu unerwarteten Ergebnissen mit bestimmten Stileigenschaften führen, zusätzlich dazu, dass er für den Browser langsam ist.

Es gibt keinen anderen CSS-Selektor, der einen Zweck wie :contains() erfüllt. Sie müssen also einen anderen Weg finden, entweder indem Sie Ihren HTML-Code ändern oder sogar jQuery’s :contains() , um den gewünschten Effekt zu erzielen:

Wählen Sie ein h3 Element
wenn es das erste Kind seines Elternteils ist
und sein Text enthält den Buchstaben “a”.

Für jQuery und seleniumium RC-Benutzer:: :contains() ist in der Sizzle-Selektor-Engine von jQuery implementiert, die auch in seleniumium RC (aber nicht seleniumium WebDriver) verwendet wird. Es funktioniert wie in dieser zehn Jahre alten Überarbeitung der CSS3-Spezifikation beschrieben , aber aufgrund der Beschreibung in der Spezifikation müssen Sie es vorsichtig verwenden oder es kann zu einer unerwarteten Auswahl kommen.

Abschließend kann h3:nth-child(1) durch h3:first-child , das als CSS2-Selector eine bessere Browserunterstützung bietet.

Wenn Sie Folgendes verwenden möchten :contains(a) , um ein Anker-Tag (statt des Buchstabens A ) zu finden, könnten Sie Folgendes verwenden:

 h3:nth-child(1) a 

oder

 h3:first-child a