Eine kleine Erinnerung daran, dass Pseudoelemente Kinder sind.

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

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!