Y a-t-il une différence fonctionnelle entre les pseudo-sélecteurs CSS 2.1 :afteret CSS 3 ::after(autre que ::afterne pas être pris en charge dans les navigateurs plus anciens)? Y a-t-il une raison pratique d'utiliser la nouvelle spécification?
Y a-t-il une différence fonctionnelle entre les pseudo-sélecteurs CSS 2.1 :afteret CSS 3 ::after(autre que ::afterne pas être pris en charge dans les navigateurs plus anciens)? Y a-t-il une raison pratique d'utiliser la nouvelle spécification?
Réponses:
C'est la distinction entre pseudo- classes et pseudo- éléments .
À l' exception de ::first-line, ::first-letter, ::beforeet ::after(qui ont été autour d' un peu de temps et peut être utilisé avec un seul si vous côlons besoin d' aide IE8), pseudo- éléments nécessitent des deux - points.
Les pseudo-classes sélectionnent elles-mêmes les éléments réels, vous pouvez utiliser :first-childou :nth-of-type(n)pour sélectionner le premier ou le spécifique <p>dans un div, par exemple.
(Et aussi des états d'éléments réels comme :hoveret :focus.)
Les pseudo-éléments ciblent une sous-partie d'un élément comme ::first-lineou ::first-letter, des choses qui ne sont pas des éléments à part entière.
En fait, meilleure description ici: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Aussi ici: http://www.evotech.net/blog/2007/ 05 / after-v-after-what-is-double-colon-notation /
:afteret de ::aftermanière interchangeable avec un comportement identique à l'exception d'IE8 qui, comme le note la question, nécessite le simple deux-points.
Les sélecteurs CSS comme ::aftercertains éléments virtuels ne sont pas disponibles en tant qu'élément explicite dans l'arborescence DOM. Ils sont appelés « pseudo-éléments » et sont utilisés pour insérer une partie du contenu avant / après un élément (par exemple: ::before, ::after) ou de sélectionner une partie d'un élément (par exemple: ::first-letter). À l' heure actuelle il n'y a que 5 éléments pseudo standard: after, before, first-letter, first-line, selection.
D'autre part, il existe d' autres types de sélecteurs appelés « pseudo-classes » qui sont utilisés pour définir un état particulier d'un élément (comme comme :hover, :focus, :nth-child(n)). Celles-ci sélectionneront l'ensemble d'un élément existant dans DOM. Les pseudo-classes sont une longue liste de plus de 30 éléments.
Initialement (en CSS2 et CSS1), la syntaxe à simple deux-points était utilisée à la fois pour les pseudo-classes et les pseudo-éléments. Mais, en CSS3, la ::syntaxe a remplacé la :notation des pseudo-éléments pour mieux les distinguer.
Pour des raisons de compatibilité ascendante, l'ancienne syntaxe à simple deux-points est acceptable pour les pseudo-éléments comme as :after(les navigateurs prennent toujours en charge l'ancienne syntaxe avec un point-virgule). Seul IE-8 ne prend pas en charge la nouvelle syntaxe (utilisez des points simples si vous souhaitez prendre en charge IE8).