CSS ” :: ” vs ” : ” — Pseudo-Element vs. Pseudo-Selektor? [duplicate]

Lesezeit: 3 Minuten

Benutzer-Avatar
J-Dizzle

Ich recherchiere CSS und Typografie und bin auf dieses faszinierende Konzept von Pseudo-Selektoren gestoßen. Ich habe Pseudo-Selektoren mit einem Doppelpunkt verwendet und bin mit der Doppelpunkt-Version der Pseudo-Selektoren nicht vertraut. Ich verstehe Dieser doppelte Doppelpunkt wird als Pseudo-Element statt als Pseudo-Selektor bezeichnet – aber warum? Und was ist der Unterschied?

Ich verstehe auch, dass der einzelne Doppelpunkt viel besser unterstützt wird. In welcher Situation würde man also das doppelte Doppelpunkt-Pseudoelement verwenden? Gibt es Anwendungsfälle, in denen ein doppelter Doppelpunkt erforderlich wäre und ein einzelner Doppelpunkt nicht ausreichen würde? was könnte das für eine Situation sein?

“Im Gegensatz zu Pseudoelementen können Pseudoklassen überall in der Selektorkette erscheinen.” (Zitat aus Link) – Ich weiß nicht, was “Selektorkette” ist, aber dies scheint auch eine weitere Einschränkung des Doppelpunkt-Ansatzes zu sein. Warum sollte ich einen doppelten Doppelpunkt verwenden, wenn es (meiner Meinung nach) nur eine weniger unterstützte Version eines einzelnen Doppelpunkts ist?

Bearbeiten: Sie scheinen funktionell nicht gleich zu sein: Geige

<div><p>First Line</p></div>
<div><p>Second Line</p></div>

css

div:nth-child(1) > p { 
    color: green;
}

div::nth-child(2) > p { 
    color: blue;
}

  • Wie MDN-Staaten: “Manchmal sehen Sie doppelte Doppelpunkte (::) statt nur einem (:). Dies ist Teil von CSS3 und ein Versuch, zwischen Pseudo-Klassen und Pseudo-Elementen zu unterscheiden. Die meisten Browser unterstützen beide Werte.”

    – j08691

    20. April 2015 um 17:39 Uhr


  • Entsprechend developer.mozilla.org/en/docs/Web/CSS/:nth-child nth-child ist ein Pseudo-Klassen-Selektor, daher sollten Sie einen einzelnen Doppelpunkt und keinen doppelten Doppelpunkt verwenden (da es sich nicht um einen Psedo-Element-Selektor handelt).

    – José Cabo

    20. April 2015 um 17:43 Uhr


  • Warum nennen Sie sie Pseudo-Selektoren, wenn die Dokumentation sie Pseudo-Klassen nennt?

    – Herr Lister

    20. April 2015 um 17:45 Uhr

  • @Mr Lister: Ich vermute, dass ihre Verwendung des Begriffs genau der Grund für diese Frage ist.

    – BoltClock

    21. April 2015 um 7:23 Uhr

Pseudo-Klassen (:) ermöglichen es Ihnen, die verschiedenen Zustände eines Elements zu stylen, z. B. wenn Sie den Mauszeiger darüber bewegen, wenn es deaktiviert ist, wenn es das erste untergeordnete Element seines übergeordneten Elements ist usw.

Pseudo-Elemente (::) ermöglichen es Ihnen, verschiedene Teile eines Elements zu gestalten, z. B. die erste Zeile, den ersten Buchstaben, das Einfügen von Inhalten davor oder danach usw.

Ursprünglich verwendeten sie alle einen einzelnen Doppelpunkt, aber CSS3 führte den doppelten Doppelpunkt ein, um die beiden zu trennen.

  • Es gibt kein Problem mit dem Einfügen von Inhalten mit einem Pseudo-Doppelpunkt.

    – Aufkleber

    20. April 2015 um 17:49 Uhr


  • Also, während ich nicht verwenden kann : und :: in der gleichen Weise (:: wird mit zB scheitern ::hover) , Ich könnte benutzen : in jeder Situation?

    – J-Dizzle

    20. April 2015 um 18:02 Uhr

  • Bis sie neue Pseudoelemente einführen, ja, sollte ein einzelner Doppelpunkt in den meisten Fällen gut funktionieren.

    – skronid

    20. April 2015 um 18:16 Uhr

  • Nutzungsrichtlinien finden Sie unter stackoverflow.com/questions/17684797/…

    – BoltClock

    21. April 2015 um 8:02 Uhr

  • @BoltClock Du hast Recht. Gemäß der CSS3-Spezifikation Pseudoklassen :Wähler(dh :schweben oder :n-tes-Kind(2)) und Pseudoelemente ::Wähler (dh ::nach oder ::erste Linie) gelten sie beide als gleich Wähler (oder ein Teil davon). Wie auch immer, diese Frage des Autors bedeutet, dass er die Bedeutung von völlig missverstanden hat : und :: Selektoren.

    – José Cabo

    21. April 2015 um 9:46 Uhr


1054960cookie-checkCSS ” :: ” vs ” : ” — Pseudo-Element vs. Pseudo-Selektor? [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy