Eine kleine Erinnerung daran, dass Pseudoelemente Kinder sind.-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Eine kleine Erinnerung daran, dass Pseudoelemente Kinder sind.

Jennifer Aniston

Apr 19, 2025 am 11:39 AM

Pseudo-Element: Es sieht aus wie ein Kinderelement, nicht genau so

Eine kleine Erinnerung daran, dass Pseudoelemente Kinder sind.

Schauen wir uns einen Behälter mit untergeordneten Elementen an:

<div class="container">
  <div>Artikel</div>
  <div>Artikel</div>
  <div>Artikel</div>
</div>

Wenn wir den folgenden Stil hinzufügen:

 .Container :: vor {
  Inhalt: "x";
}

Der Effekt entspricht:

<div class="container">
  [[[:: vor Pseudo-Element]]]]]
  <div>Artikel</div>
  <div>Artikel</div>
  <div>Artikel</div>
</div>

Das Verhalten von Pseudoelementen ähnelt dem von Kinderelementen in den meisten Fällen. Ein wichtiger Unterschied besteht jedoch darin, dass kein anderer Selektor es direkt auswählen kann, außer für den Selektor, der ihn erstellt (oder ähnliche Selektoren wie ::before oder ::after ).

Angenommen, wir setzen den Behälter auf ein 2x3-Netz, wobei jedes untergeordnete Element ein pillenartiges Design ist:

 .Container {
  Anzeige: Grid;
  Grid-Template-Säulen: 1fr 1fr;
  Raster-Lücke: 0,5REM;
}

.Container> * {
  Hintergrund: Darkgray;
  Border-Radius: 4px;
  Polsterung: 0,5Rem;
}

Wenn es keine Pseudoelemente gibt, ist der Effekt wie erwartet. Nachdem Sie das Pseudoelement hinzugefügt haben, werden Sie feststellen, dass es am Rasterlayout teilnimmt, was möglicherweise unerwartet ist. Pseudoelemente werden häufig für dekorative Zwecke verwendet, und es scheint etwas seltsam, am Inhaltslayout teilzunehmen.

Beachten Sie, dass .container > * Selector das Pseudo-Element nicht auch dunkelgrau macht, da Sie das Pseudo-Element auf diese Weise nicht auswählen können. Dies ist ein weiteres kleines Problem.

In der täglichen Entwicklung verwenden Pseudo-Elemente in der Regel position: absolute für dekorative Operationen:

 .Container :: vor {
  Inhalt: "";
  Position: absolut;
  /* Dekorativen Stil*/
}

In diesem Fall können Sie die Existenz des Pseudoelements überhaupt nicht bemerken. Obwohl es sich immer noch um ein Kinderelement handelt, das an der DOM -Struktur teilnimmt, nimmt es nicht am Rasterlayout teil. Dies ist kein Phänomen, das für das CSS -Netz einzigartig ist. In Flexbox werden Pseudo-Elemente auch Flex-Projekte. Sie können Pseudoelemente steuern, die Sie gerne mit schwimmenden oder anderen Layout-Methoden verwenden.

Entwicklertools zeigen deutlich, dass Pseudoelemente den untergeordneten Elementen im DOM ähnlich sind.

Es gibt einige andere Probleme zu beachten:

Einer ist :nth-child() Selektor. Sie könnten denken, wenn Pseudo-Elemente Kinderelemente sind, wirken sie sich auf die Berechnung von :nth-child() aus, das ist jedoch nicht der Fall. Das heisst:

 .Container>: N-te-Kind (2) {
  Hintergrund: Rot;
}

Das gleiche Element wird ausgewählt, unabhängig davon, ob das ::before Pseudoelement existiert oder nicht. Gleiches gilt für Selektoren wie ::after ,: :nth-last-child usw. Deshalb "irgendwie" im Titel. Wenn Pseudoelemente genau wie Kinderelemente sind, betreffen sie diese Selektoren.

Ein weiteres Problem ist, dass Sie Pseudo-Elemente in JavaScript nicht wie normale untergeordnete Elemente auswählen können. document.querySelector(".container::before"); wird null zurückkehren. Wenn Sie in JavaScript auf den Stil der Pseudoelemente zugreifen müssen, können Sie CSSOM verwenden:

 const styles = window.getComputedStyle (
  document.querySelector ('. Container'),
  '::vor'
);
console.log (styles.content); // "X"
console.log (styles.color); // RGB (255, 0, 0)
console.log (styles.getPropertyValue ('Farbe')); // RGB (255, 0, 0)

Haben Sie andere Probleme mit Pseudoelementen begegnet?

Das obige ist der detaillierte Inhalt vonEine kleine Erinnerung daran, dass Pseudoelemente Kinder sind.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Erklären Sie das Konzept der Benennungskonvention von BEM (Blockelement -Modifikator) in CSSJul 24, 2025 am 04:06 AM

BEM ist eine CSS -Benennungsspezifikation, die die Code -Lesbarkeit verbessert, Konflikte verringert und die Wartung erleichtert. 1.Block ist eine separate Komponente wie .BTN; 2.Lement ist ein integraler Bestandteil des Blocks, wie .Nav \ _ \ _ Link; 3.Modifier stellt einen Zustand oder eine Variante dar, wie z. B. .BTN-Large. Die Namensformate sind .Block, .Block \ _ \ _ Element, .block-modifier oder .block \ _ \ _ Element-modifier. Die Verwendung von BEM kann Klassennamenkonflikte vermeiden, die Wartbarkeit verbessern und die Zusammenarbeit der Teams erleichtern. Zu den Notizen gehören: Vermeiden von zu tiefem Level, mit dem Modifikator vernünftigerweise,

Erklären Sie die CSS -Spezifität und wie sie berechnet wirdJul 24, 2025 am 04:03 AM

CSS bezieht sich auf den vom Browser verwendeten Gewichtungsmechanismus, um zu bestimmen, welche Stilregeln bevorzugt werden. Wenn mehrere Regeln auf dasselbe Element wirken, wirkt sich eine hohe Regel in Kraft. Zum Beispiel ist #Mainp genauer als P und bedeckt die Farbe Blau. Die Berechnungsmethode basiert auf dem Auswahltyp und ist in vier Ebenen unterteilt: A ist die Anzahl der Inline-Stile, B ist die Anzahl der ID-Selektoren, C ist die Anzahl der Klassen, Attribute und Pseudoklassen, und D ist die Anzahl der Elemente und Pseudo-Elemente. Vergleichen Sie beim Vergleichen Stück für Stück und vergleichen Sie ein → B → C → D nach einer Telefonnummer. Zu den häufigen Missverständnissen gehören Missbrauch! Wichtig, Überwählerwählern, Abhängigkeits-ID-Selektoren usw. Es wird empfohlen, eine klare Struktur und einheitliche Klassennamen zu benennen, um Konflikte zu reduzieren, und Sie können die Stilabdeckung über das Entwickler-Tool und die Auswahlrechte anpassen.

Wie erstelle ich einen benutzerdefinierten Cursor mit CSS?Jul 24, 2025 am 04:03 AM

Es gibt vier Möglichkeiten, Mauszeiger mit CSS anzupassen: 1. Verwenden Sie das Cursorattribut, um integrierte Stile wie Zeiger, Text usw. festzulegen. 2. Geben Sie das benutzerdefinierte Bild als Cursor über URL () an und setzen Sie alternative Stile. 3. Fügen Sie Koordinatenwerte nach URL () hinzu, um die Hotspotposition des Cursors anzupassen. 4.. Verwenden Sie JavaScript, um den nativen Cursor auszublenden und Elemente zu simulieren, um dynamische Effekte zu simulieren. Jede Methode ist für verschiedene Szenarien geeignet und muss auf Kompatibilität, Leistung und Benutzererfahrungsdetails achten.

Was ist der Unterschied zwischen 'ID' und 'Class' -Sektoren?Jul 24, 2025 am 03:56 AM

Die Rolle von ID und Klasse in CSS ist unterschiedlich und die Nutzungsszenarien sind ebenfalls unterschiedlich. 1.ID ist ein einzigartiger Kennung, der für das Stildesign eines einzelnen einzigartigen Elements wie #Main-Incontent verwendet wird. 2.CLASS kann wiederverwendet werden und eignet sich für mehrere Elemente, um denselben Stil anzuwenden, wie z. B. .button; 3.IDs Selektorpriorität ist höher als die Klasse, was sich auf das Überschreiben des Stils auswirkt. V. 6. Es wird empfohlen, einen übermäßigen Einsatz von ID für Style -Design zu vermeiden, da es nicht einfach zu bedecken ist. 7.

Wie zentrieren Sie ein Element horizontal und vertikal mit CSS?Jul 24, 2025 am 03:55 AM

Um Elemente horizontal und vertikal zu zentrieren, umfassen die häufigsten Methoden die Verwendung von Flexbox, Grid und absolute Positionierung, um die Transformation zu entsprechen. 1. Verwenden Sie Flexbox: Stellen Sie den Container auf Flex-Layout ein und setzen Sie ihn durch Justify-Incontent- und Align-Items auf den Mittelpunkt, das für moderne Browser geeignet ist und einfach und effizient ist. 2. Verwenden Sie Raster: Verwenden Sie Display: Gitter und Orts-Items: Mitte, um Zentrierung zu erreichen, was präzise und klar ist; 3.. Absolute Positionierung und Transformation: Geeignet für alte Browser, setzen Sie sie auf 50% nach links und oben und verwenden Sie die Hälfte seiner Breite und Höhe zurück, um Zentrierung zu erreichen. Es wird gewöhnlich verwendet

Wie ändere ich die Schriftfarbe in CSS?Jul 24, 2025 am 03:51 AM

Verwenden Sie das Farbattribut von CSS, um die Textfarbe auf einer Webseite zu ändern. Diese Eigenschaft steuert die Vordergrundfarbe des Textes und unterstützt den Farbnamen, den hexadezimalen Wert, das RGB- oder HSL -Format, wie z. Zu den häufig verwendeten Methoden gehören: 1. Farbname (wie rot); 2. Hexadezimal (wie #ff0000); 3. RGB (wie RGB (255,0,0)); 4. HSL (wie HSL (0.100%, 50%)); Wenn die Farbe beim Debuggen nicht wirksam wird, kann sie durch andere Regeln, unzureichende Kontrast oder falsches Format überschrieben werden. Es wird empfohlen, Browser -Entwickler -Tools zu verwenden, um in Echtzeit zu überprüfen und zu debuggen, um den Effekt sicherzustellen

Erläutern Sie Techniken zum Bildersatz mit CSSJul 24, 2025 am 03:49 AM

ImageRePacementCtincssinvolveshidingRealtextandDisplayinganimageOrstyledversionInStad, Sicherstellung von Accessibilityandseobenefits WhileAllowualCustomization.1.TheclassicMethodusEstext-Indenttomovextoff-ScreenHileshowsaBackgroundimimimimate, erfordern, erfordern, erfordern

Was sind logische Eigenschaften und Werte von CSS?Jul 24, 2025 am 03:48 AM

CSSLogicalProperties und Werte bieten ein Layout, das auf dem Schreibmodus basiert und mit Inline-, Block-, Start-, End- und anderen logischen Anweisungen das herkömmliche linke, rechts, oben, unten ersetzt. 1. Es ermöglicht den Stil, sich automatisch an LTR-, RTL- und vertikale Layout anzupassen, ohne zusätzliche Anpassungen zu erhalten. 2. Gemeinsame Attribute umfassen Rand-Inline-Start, Padding-Block-End, Inline-Größe und Blockgröße; 3. Die für internationale Websites, Komponentenbibliotheksentwicklung und reaktionsschnelle Design anwendbar; V.

See all articles