Wie zielen CSS-Selektoren wie „a[href^='...']' auf bestimmte Ankerelemente ab?

CSS-Selektoren entschlüsseln: a[href^="..."] verstehen

CSS-Selektoren bieten eine präzise Kontrolle über HTML-Elemente durch Angabe welche Kriterien sie erfüllen müssen. Ein solcher Selektor ist a[href^="..."], der auf Ankerelemente () basierend auf dem Vorhandensein einer bestimmten Zeichenfolge am Anfang ihrer href-Attributwerte abzielt.

Bedenken Sie der folgende CSS-Code:

a[href^="http:"] {
   background: url(img/keys.gif) no-repeat right top;
}

Dieser Selektor stimmt mit allen Ankerelementen überein, deren href-Attributwerte mit „http:“ beginnen. Infolgedessen wendet jeder Link in Ihrem HTML-Dokument mit einem href-Attribut, das mit „http:“ beginnt, den angegebenen Stil an, z. B. ein Hintergrundbild.

Zur weiteren Veranschaulichung nehmen wir an, dass Sie über den folgenden HTML-Code verfügen:

<a href="http://example.com">Example Website</a>
<a href="https://anothersite.net">Another Site</a>

Die Anwendung des oben genannten CSS-Codes würde sich nur auf den ersten Link auswirken, da dessen href-Attribut mit den Kriterien des Selektors übereinstimmt (`href^="http:"). Das Hintergrundbild würde diesen Link schmücken, während der zweite Link davon unberührt bleibt.

Hier ist ein weiteres Beispiel:

a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
   background-image: none; padding-right:0;
}

Dieser Selektor zielt auf Ankerelemente mit href-Attributwerten ab, die entweder mit „http: //mysite.com“ oder „http://www.mysite.com“. Bei jedem Link in Ihrem HTML-Code, der mit diesen Mustern übereinstimmt, wird das Hintergrundbild entfernt und der rechte Abstand auf Null gesetzt.

Das obige ist der detaillierte Inhalt vonWie zielen CSS-Selektoren wie „a[href^='...']' auf bestimmte Ankerelemente ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!