Gibt es einen CSS -Selektor für Elemente, die einen bestimmten Text enthalten??

Die CSS -Selektoren wählen die HTML -Elemente aus, um Stylingeigenschaften anzuwenden. Diese werden verwendet, um die Elemente zu finden, die Sie stylen möchten. Es gibt bestimmte Kategorien von CSS-Selektoren, wie z. B. Pseudoklasse, einfache Selektoren und andere. Insbesondere ist der Attribut -Selektor die beste Option zur Auswahl des Elements mit einem bestimmten Text. Der Kombinatorauswahl kann auch für diesen Zweck angewendet werden.

Dieser Artikel zeigt die folgenden Methoden:

• Methode 1: Auswählen von Elements, das bestimmte Text mithilfe von CSS -Attribut -Selektor enthält
• Methode 2: Auswählen von Elements, das bestimmte Text mit CSS General Geschwisterauswahl enthält

Methode 1: Auswählen von Elements, das bestimmte Text mithilfe von CSS -Attribut -Selektor enthält

Der CSS -Attribut -Selektor “CSS [Attribut ~ = "Wert"] Selector”Kann helfen, das Element mit definitivem Text auszuwählen.

Syntax

Lassen Sie uns die Syntax des CSS -Attributauswählers verstehen:

[Attributname ~ = Wert]

// CSS -Erklärungen

Hier:

• “Attributname: Das im HTML -Element verwendete Attribut mit einem bestimmten Text wird hier angegeben.
• “~: Dieses Symbol ist ein allgemeiner Geschwisterkombinator. Es wird verwendet, um jedes Element zu wählen, das das nächste Geschwister eines bestimmten Elements ist.
• “Wert”: Es zeigt den Attributwert an.

Beispiel

Befolgen Sie in der HTML -Datei den aufgeführten Anweisungen:

• Zunächst fügen Sie die "hinzu"Element und eine Klasse zuweisen "Artikel-div”.
• Ergänzen Sie die "

  ","

  ", Und "

  Elemente innerhalb der Div.

• Der "

  " Und "

  ”Passen Sie die Überschriften auf der Seite an. Der "

  "Die Überschrift ist etwas kleiner als die"

  " Element.

• Der "

  Element gibt den Textinhalt auf der Seite an:

LinuxHint

Stationäre Dinge

Buch

Bleistift

Notizblock

Buch

Lass uns die Div stylen “Artikel-div"Und die Überschrift"

”Durch die Anwendung der CSS -Eigenschaften, wie unten erwähnt. Danach werden wir sehen, wie man die auswählt “

Elementtext unter Verwendung der CSS -Attribut -Selektoren.

Stil „Items-Div“ -Klasse

Die folgenden CSS -Eigenschaften werden auf die “angewendet“Artikel-div" Klasse:

.items-div
Text-Align: Mitte;
Schriftgröße: 17px;
Schriftfamilie: 'Trebuchet MS';

Hier:

• “Textausrichtung”Bestimmt die Textausrichtung.
• “Schriftgröße”Passt die Element -Schriftgröße an.
• “Schriftfamilie”Nimmt den Schriftstil des Elements aus.

Stil „H2“ Element

“H2”Ist auch als Element Selector bekannt. Es wird verwendet, um das zu stylen

Element mit den folgenden Eigenschaften:

H2
Schriftgröße: 30px;
Buchstabenabteilung: 0.2em;
Farbe: RGB (182, 14, 238);

Im obigen Code-Block:

• “Buchstaben-Abstand”Passt den Abstand zwischen den Zeichen des Elements ein.
• “Farbe”Weisen dem Text die Farbe zu.
• “SchriftgrößeDie Eigenschaft ist im obigen Abschnitt definiert.

Wählen Sie den Text "Buch" aus

Um einen bestimmten Text aus dem Dokument auszuwählen, gibt es keinen bestimmten Selektor. Das Attribut des Elements muss nur angegeben werden. Mit Hilfe des Attributwerts können wir dann den Text in CSS auswählen:

[stationär ~ = "buchen"]
Hintergrundfarbe: Cornflowerblue;

Hier in CSS die “HintergrundfarbeDie Eigenschaft wird an den Text angepasst, indem das Attribut angegeben wird “stationär"Wert haben"Buch”.

Die folgende Ausgabe zeigt, dass alle Elemente mit dem Attributwert ““Buch”Sind gestylt:

Schauen wir uns nun das Beispiel an, um Stile auf die "anzuwenden"Bleistift”Text. Zu diesem Zweck stationär mit dem Wert “Bleistift”Wird in CSS über den Attributauswählte abgerufen:

[stationär ~ = Bleistift]
Hintergrundfarbe: RGB (240, 168, 234);
Polsterung: 5px;

Hier:

• “Hintergrundfarbe”Spezifizierte die Farbe des Hintergrunds des Elements.
• “Polsterung”Weisen Platz um den Inhalt des Elements zu.

Ausgang

Methode 2: Auswählen von Elements, das bestimmte Text mit CSS General Geschwisterauswahl enthält

Es gibt eine andere Methode, um Stile auf die Elemente mit Text anzuwenden. Diese Methode sollte jedoch verwendet werden, wenn Sie mehrere haben “

Elemente mit einem Text, und Sie müssen sie alle auf einmal stylen. Geben Sie dazu das Element an, das kurz vor dem liegt “

Element.

Syntax

Hier ist die Syntax des oben genannten Szenarios:

Erste Sequenz-Element ~ zweite Sequenz-Element
CSS -Erklärungen

Beispiel

Fügen wir allen Stylen hinzu " H4 ~ p
Farbe: Crimson;
Schriftdicke: fett;

Der "H4 ~ p”Bedeutet die“

"Elemente, die direkte Geschwister der" sind "

" Element. Die folgenden beschriebenen Eigenschaften werden hinzugefügt:

• Der "SchriftgewichtEigenschaft bezeichnet die Dicke der Schriftart des Elements.
• Der "FarbeEigenschaft behebt die Farbe der Schriftart.

Ausgang

Mit diesen Arten können Sie Elemente mit einem bestimmten Text aus auswählen, der in CSS gestaltet wird.

Abschluss

So wählen Sie die Elemente mit bestimmtem Text aus, das CSS “Attribut -Selektoren" Und "Allgemeiner Geschwisterkombinatorauswahl" kann verwendet werden. Die Attribut -Selektoren geben den Attributnamen des Elements und dessen Wert an. Dann deklarieren Sie die CSS -Eigenschaften dafür. Der allgemeine Geschwister -Kombinatorauswahl auswählt jedes Element, dem der vorherige Selektor folgt. Dieser Artikel hat gezeigt, wie sich Elemente in CSS mit bestimmtem Text ausgewählt haben.