Vier Kategorien von CSS-Selektoren: Basis, Kombination, Attribut, Pseudoklasse

Vier Kategorien von CSS-Selektoren: Basis, Kombination, Attribut, Pseudoklasse

Was ist ein Selektor? Die Rolle des Selektors besteht darin, Elemente darüber zu finden und den CSS-Stil an die Elemente zu übergeben! CSS-Selektoren werden hauptsächlich in vier Kategorien unterteilt: Basisselektor, Attributselektor, kombinierter Selektor und Pseudoklassenselektor!

Grundlegende CSS-Selektoren

Die grundlegenden Selektoren sind unterteilt in: * Platzhalter, Tag-Selektor, Klassenselektor, ID-Selektor. Die Programmieridee, die hier beachtet werden muss, besteht darin, dass ein Element im CSS-Cascading-Stylesheet nur eine ID hat. Achten Sie dabei auf folgende Punkte: 1. Eindeutigkeit der ID 2. Element-IDs sind unterschiedlich, so wie jeder nur einen Personalausweis hat, steht die ID für den Personalausweis 3. Der Klassenselektor ist nicht eindeutig, er kann wiederverwendet werden! Darüber hinaus steht das Platzhalterzeichen * für den globalen

  <!DOCTYPE html>
<html lang="de">
  <Kopf>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
     <title>CSS-Basisselektor</title>
     <style type="text/css">
          *{
              Farbe: himmelblau;
         }/**Platzhalter*/
         div{
             Farbe: rot;
         }/*Tag-Selektor*/
         .Kasten{
             Farbe: stahlblau;
         }/*Klassenselektor*/.box{color: steelblue;} kann auch als *.box{color: steelblue;} geschrieben werden, was bedeutet, dass die Schriftfarbe aller Boxen stahlblau ist.
         #Inhalt{
             Farbe: Tomate;
         }/*ID-Selektor*/
     </Stil>
 </Kopf>
 <Text>
     <div Klasse="Box" ID="Inhalt">
         Der Schwerpunkt des Dahuiniu-Blogs liegt auf dem Erlernen von Web-Frontend-Technologien</div>
 </body>
 </html>

CSS-Kombinationsselektor

Manche Leute verknüpfen grundlegende Selektoren durch spezielle Symbole und nennen sie CSS-Kombinationsselektoren. Gängige CSS-Kombinationsselektoren sind: Gruppenselektoren, verschachtelte Selektoren, Unterselektoren, benachbarte Selektoren auf gleicher Ebene

 <!DOCTYPE html>
  <html lang="de">
  <Kopf>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
      <title>CSS-Kombinationsselektor</title>
      <style type="text/css">
      /* div{
          Farbe: blaugrün;
         Schriftgröße: 24px;
     }
     P{
         Farbe: blaugrün;
     } */
     div{
         Schriftgröße: 24px;
     }
     div,p{
         Farbe: blaugrün;
     }/*Gruppenselektor*/
     div p{
         Farbe: rot;
     }/*Verschachtelte Selektoren*/
     ul>li{
         Schriftgröße: 24px;
         Listenstil: Quadrat;
     }/*Untergeordneter Selektor*/
     div+p{
         Farbe: blau;
     }/*Benachbarte Selektoren derselben Ebene*/
     </Stil>
 </Kopf>
 <Text>
     <div>
         Die Leute bewundern nur die hellen und schönen Blumen des Erfolgs! Ihre Knospen waren jedoch mit den Tränen des Kampfes getränkt und mit dem Blut des Opfers besprenkelt.<p>Ich dachte, ich wüsste viel und hätte viel erlebt, aber am Ende wurde mir klar, dass das alles so lächerlich war</p>
     </div>
     <p>Wir sollten nicht nur auf den Moment des Erfolgs schauen, sondern auch den Prozess des Erfolgs sehen, um uns selbst zu motivieren, weiterhin Anstrengungen zu unternehmen und auf das Ziel des Erfolgs hinzuarbeiten.</p>
     <p>Die Menschen bewundern nur die leuchtenden und schönen Blumen des Erfolgs! Ihre Knospen sind jedoch mit den Tränen des Kampfes getränkt und mit dem Blut des Opfers besprenkelt.<span>Wir sollten nicht nur den Moment des Ruhms der erfolgreichen Menschen betrachten, sondern auch den Prozess ihrer Bemühungen und Kämpfe sehen, um uns selbst zu motivieren, weiter hart zu arbeiten und auf das Ziel des Erfolgs hinzuarbeiten.</span></p>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
 </body>
 </html>

CSS-Attributselektor

Basisselektor [Attribut], Basisselektor [Attribut=Wert], Basisselektor [Attribut~=Wert] durch Leerzeichen getrennt, womit beginnt Basisselektor [Attribut^=Wert], womit endet Basisselektor [Attribut$=Wert]

<!DOCTYPE html>
 <html lang="de">
 <Kopf>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
      <title>CSS-Attribut-Selektor</title>
      <style type="text/css">
     div[Titel]/*Basisselektor [Attribut]*/
     div[title=deutsch]{
         Farbe: blau;
     }/*Basisselektor [Attribut=Wert]*/
     div[title~=de]{
         Farbe: #f90;
         Schriftstärke: fett;
     }/*Basisselektor [Attribut~=Wert] enthält eines der Attribute*/
     p,div[Titel^=zh]{
         Schriftgröße: 24px;
         Farbe: braun;
     }/*Womit beginnt der Basisselektor [Attribut^=Wert]*/
     div[Titel$=China]{
         Buchstabenabstand: 10px;
         Textdekoration: durchgestrichen;
         Schriftstil: kursiv;
     }/*Womit endet der Basisselektor [Attribut $=Wert]*/
     </Stil>
 </Kopf>
 <Text>
     <div title="deutsch">
         Wenn Sie es NICHT einfach erklären können, verstehen Sie es NICHT gut genug
     </div>
     <div title="englisch de yingyu">
         Ist dir das nicht aufgefallen? 2013 Ich liebe dich mein ganzes Leben lang, 2014 Ich liebe dich mein ganzes Leben lang, 2015 Ich liebe dich mein ganzes Haus lang, 2016 Ich liebe dich über alles, 2017 Ich liebe dich für alles, 2018 Ich liebe dich halb, 2019 Ich liebe dich immer noch, 2020 Ich liebe dich, 2021 Ich liebe dich einfach🌝
     </div>
     <p title="zh de">
         Vier Kategorien von CSS-Selektoren: Basis, Kombination, Attribut, Pseudoklasse</p>
     <div Titel="zh en china">
         http://www.cnblogs.com/dhnblog/p/12293463.html
     </div>
 </body>
 </html>

CSS-Pseudoklassen-Selektor

Wörtlich genommen bedeutet Pseudo unecht, und Elemente sind Tags und die von Tags umschlossenen Inhalte. Einfach ausgedrückt sind Pseudoelemente unechte Elemente, und das Gegenteil von unecht ist echt. Auf der Seite werden diese von uns selbst geschrieben, also sind sie echt. In dieser HTML-Seite werden alle Elemente heimlich mit Start- und End-Tags versehen. Dies ist ein Pseudoelement. Der Pseudoklassenselektor verweist auf einen Betriebszustand!

 <!DOCTYPE html>
 <html lang="de">
  <Kopf>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
      <title>CSS-Pseudoklassen-Selektor</title>
     <style type="text/css">
          P{
              Farbe: braun;
             Rand: 1px tief schwarz;
             Höhe: 40px;
             Zeilenhöhe: 40px;
         }
         p::vor{
             Inhalt: „vor dem Start“;
         }
         p::nach{
             Inhalt: „nach Ende“;
         }
         /* Für den ersten Buchstaben eines Blockelements::first-letter
         Erste Textzeile::erste-zeile */
         div::erster-Buchstabe{
         Schriftgröße: 24px;
         Farbe: blau;
         }
         div::erste-Zeile{
             Farbe: gelbgrün;
             Schriftstil: initial;
             Schriftstärke: fett;
         }
     </Stil>
 </Kopf>
 <Text>
     <div class="box">http://www.dhnblog.com/ Dahuiniu Blog Technologie ist der König der Welt, harte Arbeit lässt Träume wahr werden und die Höhe hängt von der Einstellung ab<!--before Start-->
     <p>Valentinstagsgrüße für Ihre Freundin, sehr süß und verführerisch, gewinnen Sie sofort ihr Herz!</p>
     <!--nach Ende-->
     </div>
 </body>
 </html>

Zusammenfassen

Oben sind die vier Hauptkategorien von CSS-Selektoren, die der Editor eingeführt hat: Basis, Kombination, Attribut und Pseudoklasse. Ich hoffe, dass dies für alle hilfreich sein wird. Vielen Dank für Ihre Unterstützung der Website 123WORDPRESS.COM!

<<:  Zusammenfassung der praktischen Erfahrungen zu HTML-Wissenspunkten

>>:  Eine gute Möglichkeit, Ihre Designfähigkeiten zu verbessern

Artikel empfehlen

So verbinden Sie Navicat mit der Docker-Datenbank auf dem Server

Starten Sie den MySQL-Container in Docekr Verwend...

Äußerst detaillierte Freigabe der MySQL-Nutzungsspezifikation

In letzter Zeit waren viele datenbankbezogene Vor...

Detaillierte Erläuterung des SVN-Ein-Klick-Installations-Shell-Skripts unter Linux

#!/bin/bash #SVN herunterladen yum -y installiere...

Detaillierte JavaScript-Rekursion

Inhaltsverzeichnis 1. Was ist Rekursion? 2. Mathe...

Erläuterung von JavaScript-Mikrotasks und Makrotasks

Vorwort: js ist eine Single-Thread-Sprache, daher...

vue + springboot realisiert die Login-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Welche Wissenssysteme brauchen Webdesigner?

Produktdesigner sind mit komplexen und großen Fert...

Vue implementiert die Produktregisterkarte der Produktdetailseitenfunktion

In diesem Artikelbeispiel wird der spezifische Co...

XHTML-Einführungstutorial: Textformatierung und Sonderzeichen

<br />Dieser Abschnitt stellt die Implementi...

Perfekte Lösung für das Problem, dass Windows Server 2012 oder 2016 .NET Framework 3.5 nicht ohne Festplatte installieren kann

Problembeschreibung Bei Verwendung von Windows Se...

MySQL-Schleife fügt zig Millionen Daten ein

1. Erstellen Sie eine Testtabelle Tabelle `mysql_...

Detaillierte Erläuterung der SEO-Optimierungsmethode für Vue-Entwicklungswebsites

Da der Datenbindungsmechanismus von Vue und ander...

Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format

Beispiel für das Zuschneiden einer Webseite von P...

HTML-Auswahloption So treffen Sie die Standardauswahl

Wenn Sie einer Option das Attribut selected = &quo...

Detaillierte Erläuterung der Vue + Axios-Anforderungsschnittstellenmethode und der Parameterübergabemethode

Inhaltsverzeichnis 1. Anfrage erhalten: 2. Anfrag...