Nützliche CSS-Selektoren, die Sie vielleicht nicht kennen

<p>

<p>CSS-Selektoren spielen eine wichtige Rolle in der Webentwicklung und werden für die Gestaltung von Webseiten verwendet. Während viele Menschen mit gängigen Selektoren vertraut sind, gibt es einige weniger verbreitete, aber sehr nützliche Selektoren.

Was sind CSS-Selektoren?

<p>CSS-Selektoren sind Muster, mit denen Elemente auf einer Webseite für die Gestaltung ausgewählt werden. Sie können Elemente anhand von Attributen, Klassen, IDs usw. finden.

Häufig verwendete CSS-Selektoren

<p>Hier sind einige häufig verwendete Selektoren:

• Elementauswahl: Zielt auf alle Elemente eines bestimmten Typs. Um beispielsweise alle <div>-Elemente zu formatieren:

<code>div {
  border: 1px solid black;
}</code>

• Klassenauswahl: Wählt Elemente mit einer bestimmten Klasse aus. Wenn wir eine Klasse namens „text-large“ haben:

<code>.text-large {
  font-size: 20px;
}</code>

• ID-Selektor: Zielt auf Elemente mit einer bestimmten ID ab. Für Element mit der ID „header“:

<code>#header {
  background-color: blue;
}</code>

• Attributauswahl: wird für Elemente mit bestimmten Attributwerten verwendet. Um beispielsweise alle externen Links zu formatieren (mit dem „rel“-Attribut):

<code>a[rel="external"] {
  color: red;
}</code>

Ungewöhnliche, aber nützliche CSS-Selektoren

Kinderauswahl (>)

<p>Es lokalisiert die direkten untergeordneten Elemente des Elements. Für übergeordnete Elemente mit der Klasse „container“:

<code>.container > p {
  margin-left: 10px;
}</code>

Nachkommenauswahl ( )

<p>Dadurch werden alle Nachkommen innerhalb des Elements ausgewählt. Wenn wir ein Div mit der ID „main“ haben und alle darin enthaltenen <span>-Elemente formatieren möchten:

<code>#main span {
  color: green;
}</code>

Angrenzende Geschwisterauswahl ( )

<p>Wählt ein Element aus, das unmittelbar auf ein anderes bestimmtes Element folgt. Wenn beispielsweise nach dem <h3>-Element ein <p>-Element steht:

<code>h3 + p {
  font-weight: bold;
}</code>

Universelle Geschwisterauswahl (~)

<p>Suchen Sie das Geschwisterelement eines anderen Elements, das nicht unbedingt benachbart ist. Wenn wir ein Div mit der Klasse „item“ haben und alle nachfolgenden Geschwisterelemente mit der Klasse „detail“ formatieren möchten:

<code>.item ~ .detail {
  padding-top: 5px;
}</code>

Attributselektor mit teilweiser Übereinstimmung (^=, $=, *=)

• Beginnt mit (^=): Um den Stil aller Bildquellen festzulegen, die mit „https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a“ beginnen:

<code>img[src^="https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a"] {
  border-radius: 5px;
}</code>

• endet mit ($=): Für alle Formulare, deren Methoden mit „post“ enden:

<code>form[method$="post"] {
  background-color: #f0f0f0;
}</code>

• *enthält (=)**: Um alle Links zu formatieren, die „Produkt“ in ihrem href-Attribut enthalten:

<code>a[href*="product"] {
  text-decoration: underline;
}</code>

Negative Pseudoklasse (:not())

<p>Es wählt Elemente aus, die nicht mit einem bestimmten Selektor übereinstimmen. Zum Beispiel alle Elemente außer Elementen mit der Klasse „hidden“:

<code>:not(.hidden) {
  display: block;
}</code>

Ziel-Pseudoklasse (:target)

<p>Wenn das URL-Fragment mit der ID des Elements übereinstimmt. Für den Teil der URL mit der ID „Kontakt“:

<code>div {
  border: 1px solid black;
}</code>

Sprachpseudoklasse (:lang())

<p>Suchen Sie Elemente anhand von Sprachattributen. Für Elemente mit lang="en-US":

<code>.text-large {
  font-size: 20px;
}</code>

hat eine Pseudoklasse (:has())

Die Pseudoklasse <p>:has() wird verwendet, um Elemente auszuwählen, die bestimmte untergeordnete Elemente oder untergeordnete Elemente enthalten. So formatieren Sie beispielsweise ein Div, das ein Bild enthält:

<code>#header {
  background-color: blue;
}</code>

Auswahl-Pseudoklasse (::selection)

<p>Mit dieser Pseudoklasse können Sie den vom Benutzer ausgewählten Textteil formatieren. Wenn der Benutzer beispielsweise Text in einem Absatz auswählt:

<code>a[rel="external"] {
  color: red;
}</code>

Fazit

<p>Diese ungewöhnlichen CSS-Selektoren bieten zusätzliche Möglichkeiten, Elemente präzise zu positionieren und zu formatieren. Sie erhöhen die Flexibilität und Funktionalität des CSS-Codes und machen ihn leistungsfähiger und effizienter bei der Erstellung optisch ansprechender und gut strukturierter Webseiten.

<p>Weitere Informationen finden Sie unter https://www.php.cn/link/8dacd3d8b9d2cd20eb244b5f745ea88e

Das obige ist der detaillierte Inhalt vonNützliche CSS-Selektoren, die Sie vielleicht nicht kennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!