HTML-Element mit CSS ausblenden, wenn es einen bestimmten Text enthält?

7712
Rookie

Es ist schwierig, Websites zu manipulieren, wenn für jedes Element keine eigene Klasse vorhanden ist.

Wie könnte ich zum Beispiel das zweite Element aus dem folgenden Code ausblenden?

<p> <p>te</p> <p>st</p> <p>ing</p> </p>

Der Text ändert sich niemals innerhalb des Elements.

Ich verwende Stylish with Firefox, um CSS / HTML für Websites zu bearbeiten.

1
Unter welchen Bedingungen sollte es versteckt werden? Ich gehe davon aus, dass Sie es programmatisch verstecken wollen CLockeWork vor 10 Jahren 0
Es sollte ausgeblendet werden, wenn das HTML-Element "st" Text enthält und das zweite Element dort ist. Ich weiß nicht, wie man herausfinden kann, welches Element ausgeblendet werden soll, es sei denn, CSS hat ein Feature, das auf n-te Elemente zeigt. Rookie vor 10 Jahren 0
CSS hat tatsächlich eine solche Funktion: http://www.w3schools.com/cssref/sel_nth-child.asp CLockeWork vor 10 Jahren 0

1 Antwort auf die Frage

2
CLockeWork

Ich kenne keine Möglichkeit, Logik zu verwenden (nur einen Wert in einem Tag zu identifizieren und etwas bestimmtes zu tun), indem nur CSS und HTML verwendet werden. Dazu benötigen Sie Javascript oder etwas anderes. Wenn Sie jedoch das zweite p-Element im Textblock ausblenden möchten, können Sie dies mit dem nth-of-Typ-CSS-Selektor tun:

Wickeln Sie Ihre p-Tags in ein div und geben Sie dem div eine Klasse.

<div class="HideChild"> <p>te</p> <p>st</p> <p>ing</p> </div>


Dann erstellen Sie in Ihrer CSS einen Selektor wie folgt:

.HideChild p:nth-of-type(2) { display: none; }


Wenn Sie die p-Tags in ein div einfassen und eine Klasse verwenden, können Sie diese Funktion für mehrere Textblöcke auf Ihrer Seite wiederverwenden. Wenn Sie ändern möchten, welche Linie versteckt ist die Zahl nach dem n-ten Kind ändern, und wenn Sie die Seite wollen eine Lücke zeigen, wo die Linie wird ersetzen sollte display: nonemit visibility: hidden.

Scheint zu funktionieren, aber es zählt nicht, um welche Art von Element es sich handelt. Nehmen wir an, es gibt eine Reihe von Links in der Klasse HideChild und einige

Tags, die ich verstecken möchte. Wenn sich die Anzahl der Verknüpfungen ändert, weiß die nth-child-Funktion nicht mehr, welches Element ausgeblendet werden soll.

Rookie vor 10 Jahren 0
Eine andere Möglichkeit ist, sie zu durchlaufen und `` $ (this) .contains (""); "" von jquery zu verwenden nerdwaller vor 10 Jahren 0
Good point @Rookie, meine Antwort wurde aktualisiert, um stattdessen den nth-of-type Selector zu verwenden CLockeWork vor 10 Jahren 0
Funktioniert jetzt einwandfrei! Wo finden Sie all diese Funktionen von CSS? Gibt es eine Site mit einer Liste aller CSS-Befehle, und ich könnte sie nacheinander lernen? Rookie vor 10 Jahren 0
@nerdwaller, ist es möglich, JS mit Stylish zu verwenden? Rookie vor 10 Jahren 0
@Anfänger; http://www.w3schools.com/ Sie lernen alles, was Sie wissen müssen, und hat auch Referenzseiten für alles. Es umfasst HTML, CSS, JavaScript, SQL, PHP ... So habe ich es trotzdem gelernt: D CLockeWork vor 10 Jahren 0
@CLockeWork, wie heißen diese magics wie "nth-of-type" dort? Ich kann keine Seite mit den aufgelisteten finden. Rookie vor 10 Jahren 0
@Rookie, dies sind CSS-Selektoren http://www.w3schools.com/cssref/css_selectors.asp (und sie können die Art und Weise, wie Sie Ihre Websites erstellen, revolutionieren: D) CLockeWork vor 10 Jahren 0
@rookie - Sorry, ich habe noch nie stylisch benutzt. Ich neige dazu, Benutzerskripte für eine solche Anwendung zu bevorzugen. nerdwaller vor 10 Jahren 0
@nerdwaller, Anwendung wie, was? Es ist nicht so, dass jede Website über eine Benutzer-Skript-Anwendung verfügt. Rookie vor 10 Jahren 0
@rookie - Zum Ausblenden eines bestimmten Elements auf einer bestimmten Seite oder zum Festlegen, wie eine bestimmte Seite aussieht. nerdwaller vor 10 Jahren 0
@nerdwaller, wie kann ich diese Benutzerskripte verwenden? Ich möchte noch etwas mehr mit HTML anfangen, was ich nicht mit CSS machen kann. Rookie vor 10 Jahren 0
@Rookie - Take a look at the [Greasemonkey Wiki](http://wiki.greasespot.net/Main_Page), you should be able to find whatever you need there. Also, you can look at source of userscripts on [Userscripts.org](http://userscripts.org). The header is the required piece, beyond that - do whatever you need. nerdwaller vor 10 Jahren 0

Verwandte Probleme