Quelle est la différence entre: avant et: avant?
Je viens de voir un code CSS qui incluait la balise ::before. J'ai regardé MDN pour voir ce qu'est le ::before mais je ne l'ai vraiment pas compris.
Quelqu'un peut-il expliquer comment cela fonctionne?
Fait-il un élément DOM avant ce que nous sélectionnons par CSS?
5 réponses
Cela distingue les pseudo-éléments des pseudo-classes.
La différence entre les pseudo-classes et les pseudo-éléments est décrite à http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html
Selon ces docs, ils sont équivalents:
element:before { style properties } /* CSS2 syntax */
element::before { style properties } /* CSS3 syntax */
La seule différence est que les deux points est utilisé en CSS3, alors que le seul colon est l'ancienne version.
Raisonnement:
La notation ::before a été introduite dans CSS 3 afin d'établir un discrimination entre pseudo-classes et pseudo-éléments. Navigateur acceptez également la notation: before introduite en CSS 2.
Ils signifient essentiellement la même chose. Le :: a été introduit dans CSS3 pour aider à décriminaliser entre les pseudo-éléments (comme :before et :after) et les pseudo-classes (comme: link et :hover).
J'ai vérifié MDN et w3.org, et le meilleur que j'ai pu arriver, c'est que :: est utilisé pour structurel change, et : est utilisé pour style.
Ils sont actuellement interchangeables pour des raisons de compatibilité.
, Il semble séparer :link (par exemple), les styles d'un <a>, de :before (qui est un structurel changer).
: est pour le style, :: est pour la structure.
L'un est la manière CSS2 (:before) et L'autre est CSS3 (:: before). Actuellement, ils sont interchangeables dans les navigateurs qui prennent en charge CSS2 et CSS3.
Voici une bonne explication: http://www.impressivewebs.com/before-after-css3/