Beginn einer neuen Ära der CSS3-Programmierung: Beherrschung der interessanten Verwendungsmöglichkeiten von Is- und Where-Selektoren-CSS-Tutorial-php.cn

Beginn einer neuen Ära der CSS3-Programmierung: Beherrschung der interessanten Verwendungsmöglichkeiten von Is- und Where-Selektoren

王林

Freigeben： 2023-09-09 08:15:18

Original

743 Leute haben es durchsucht

Beginn einer neuen Ära der CSS3-Programmierung: Beherrschung der interessanten Verwendungsmöglichkeiten von Is- und Where-Selektoren

Eröffnen Sie eine neue Ära der CSS3-Programmierung: Beherrschen Sie die interessante Verwendung von Is- und Where-Selektoren.

In der CSS-Programmierung sind Selektoren ein sehr wichtiger Teil, der uns dabei helfen kann, den Stil von Webseitenelementen genau zu steuern. Allerdings wurden in CSS3 einige interessante und leistungsstarke Selektoren hinzugefügt, wie z. B. die Selektoren is und where, die unserer Programmierung ein neues Erlebnis verleihen.

is Selektor ist eine neue Funktion in CSS3, die es uns ermöglicht, Elemente basierend auf ihrem Typ und ihrer Attributübereinstimmung auszuwählen. Wenn wir beispielsweise alle Eingabeelemente vom Typ „checkbox“ und der Klasse „form-control“ auswählen möchten, können wir den folgenden Code verwenden:

input:is([type="checkbox"].form-control) {
  /* 这里是样式代码 */
}

Nach dem Login kopieren

Im obigen Code verwenden wir den Attributselektor und sind Selektor, Die Eingabe Elemente mit Typ „checkbox“ und Klasse „form-control“ werden jeweils ausgewählt. Auf diese Weise können wir spezifische Stile für diese Elemente festlegen.

Ein weiterer interessanter Selektor ist der Where-Selektor. Er ähnelt dem is-Selektor, Bedingungen können jedoch mithilfe logischer Operatoren kombiniert werden. Wenn wir beispielsweise alle Elemente auswählen möchten, deren Attributnamen mit „w-“ beginnen und deren Attributwerte mit „red“ enden, können wir den folgenden Code verwenden:

:where([name^="w-"][name$="red"]) {
  /* 这里是样式代码 */
}

Nach dem Login kopieren

Im obigen Code verwenden wir das Attribut Namen, die mit „w-“ enden. Bedingungen, die mit „ beginnen und deren Attributwert mit „red“ endet, werden mithilfe logischer Operatoren kombiniert, um Elemente auszuwählen. Auf diese Weise können wir Elemente flexibler gestalten.

Zusätzlich zum is-Selektor und dem where-Selektor führt CSS3 auch einige andere Selektoren ein, z. B. den :has-Selektor und den :matches-Selektor, die unserer Programmierung ebenfalls mehr Komfort und Kreativität verleihen können.

Im Allgemeinen bieten uns CSS3-Selektoren mehr Flexibilität und Kreativität, sodass wir den Stil von Webseitenelementen bequemer steuern können. Sie ermöglichen es uns, prägnanteren und effizienteren Code zu schreiben und können in einer Vielzahl unterschiedlicher Szenarien angewendet werden. Indem wir die Verwendung dieser Selektoren beherrschen, können wir unser CSS-Programmierniveau verbessern und der Webentwicklung mehr Möglichkeiten bieten.

Ich hoffe, dass dieser Artikel für Ihr Studium und Ihre Arbeit hilfreich sein wird, und ich wünsche Ihnen, dass Sie auf dem Weg der CSS3-Programmierung immer weiter vorankommen!

Codebeispiel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3选择器示例</title>
  <style>
    input:is([type="checkbox"].form-control) {
      /* 设置样式 */
      border: 1px solid red;
      padding: 10px;
    }

    :where([name^="w-"][name$="red"]) {
      /* 设置样式 */
      background-color: red;
      color: white;
    }
  </style>
</head>
<body>
  <form>
    <input type="text" class="form-control">
    <input type="checkbox" class="form-control">
    <input type="checkbox">
    <input type="text" name="w-red" value="example">
    <input type="text" name="w-blue" value="example">
  </form>
</body>
</html>

Nach dem Login kopieren

Im obigen Beispielcode definieren wir die Stile von zwei Selektoren, um spezifische Effekte auf die entsprechenden Elemente zu erzielen. Durch Ändern und Debuggen dieses Codes können Sie interessante Verwendungsmöglichkeiten der is- und where-Selektoren besser verstehen und anwenden. Viel Spaß beim Programmieren!

Das obige ist der detaillierte Inhalt vonBeginn einer neuen Ära der CSS3-Programmierung: Beherrschung der interessanten Verwendungsmöglichkeiten von Is- und Where-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!