Le pseudo sélecteur CSS est utile lorsque ne pouvez pas accéder au PHP sous jacent du site. L’article d’aujourd’hui vient de mon expérience de partenariat avec des clients WordPress de petites entreprises. Ces clients apportent souvent beaucoup de code PHP qui ne peut pas être édité. Par exemple, ils essaient de combiner un plug in de partage social avec un thème de création de page, ce qui est presque réalisable, mais ils ne peuvent pas réparer un ou deux détails damp;rsquoaffichage.
Ces types de projets font frissonner les puristes, mais comme les bons clients qui ont des besoins réels ont tendance à se retrouver avec ces types de configurations, il est préférable de savoir comment les aider. Le pseudo sélecteur CSS est un domaine de développement Web qui devient très utile lorsque ne pouvez pas atteindre le PHP sous jacent, donc aujourdamp;rsquohui nous apprenons quelques magie noire CSS. Pseudoselectors Introduction CSS pseudoselectors élargit considérablement la fonctionnalité de CSS, permettant de sélectionner intelligemment des éléments spécifiques sur une page Web et damp;rsquoapporter damp;rsquoautres changements impossibles.
Jamp;rsquoutilise
Il doit être lamp;rsquoélément ol ou UL).
Éléments pseudo les éléments pseudo sont plus complexes et plus puissants: ils permettent en fait de créer du contenu sur une page Web en utilisant CSS, ce qui namp;rsquoaurait pas été possible autrement. Lamp;rsquoexemple le plus courant est: après: A: après {contenu:
Documentation cet article est nouveau pour , je suggère de lire et de parcourir simple de lamp;rsquoécole W3. Même si connaissez les pseudo sélecteurs, je recommande fortement de vérifier la liste complète des pseudo classes et des pseudo éléments, car certains sont inconnus de moi! Les pseudo électeurs CSS plus complexes:: not,: Nth Child CSS3 apportent de nouvelles pseudo classes très utiles, telles que: not et: Nth Child:: Not (p) {color: 000} Cela rend le texte noir pour tout ce qui namp;rsquoest pas un paragraphe (élément p). Li: sous élément n (3) {afficher: aucun} Ceci cache et supprime tout Li qui est le troisième enfant de son parent du flux de mise en page.
Ces nouvelles pseudoclasses CSS3 samp;rsquoappliquent à tout ce qui est plus récent que IE8, le dernier navigateur principal vraiment effrayant de lamp;rsquoépoque moderne. Maintenant que la part de marché de IE8 est finalement inférieure à 1%, nous pouvons commencer à les utiliser avec plus de confiance. Encore une fois, samp;rsquoil samp;rsquoagit des nouvelles, il y a encore de bonnes lectures à lire. Cet article du magazine smash est un bon début. Les pseudo sélecteurs CSS en série nous pouvons concaténer les pseudo sélecteurs CSS pour effectuer des changements très complexes. Ici, nous allons discuter de la pseudo sélection combinée en cascade
Ce sont des domaines où des changements assez complexes sont apportés. Cela nous permet de résoudre de nombreux problèmes qui nécessitent généralement un accès JavaScript ou PHP au site.
Jamp;rsquoa i créé un exemple en utilisant le menu de navigation wpshout. Cet exemple est stupide, mais il reflète beaucoup des exigences du client réel. Par exemple, je pense que les changements suivants dans le menu de navigation wpshout apporteront plus de trafic: Mais le problème est que dans ce faux exemple, le menu de navigation de wpshout est généré par un thème mal écrit qui contient un tas de fichiers Template cachés qui ne peuvent pas être consultés, de sorte que le problème damp;rsquoédition de PHP est beaucoup plus important que sa valeur. Tout ce que nous avons, camp;rsquoest la capacité damp;rsquoétiqueter les sujets générés et damp;rsquoéditer le site CSS.
Ce que nous devons utiliser: les balises de menu Voici une version simplifiée des balises que nous voyons à lamp;rsquoavant (en utilisant lamp;rsquooutil Chrome Developer ou similaire):
-
- Notre CSS a un pseudo sélecteur de chaîne il samp;rsquoagit damp;rsquoun CSS complet:
Oui. Menu de navigation. Élément de navigation: après le premier sous élément: {contenu: amp;lsquo(get read!)}. Menu de navigation. В item: Not (: First Child): Not (: Last Child): after {content: amp;lsquo(Checkout!)amp;rsquo} Menu de navigation. Entrée de navigation: {couleur: FFF taille de police:. 6em remplissage à gauche:. 2rem} après. Menu de navigation. В item: after the last Child: {content:
Notez damp;rsquoabord que pouvez connecter une pseudo classe (par exemple: premier enfant) à un pseudo élément (par exemple: avant et: après) comme indiqué dans la ligne:. Menu de navigation. Éléments de navigation: n
Enfant (3): après {couleur: aaa} Cette ligne traite des éléments suivants: un élément qui se trouve dans un élément avec une classe de menu NAV, qui a une classe damp;rsquoélément NAV, et qui est le premier enfant de son élément parent. La règle utilise ensuite un pseudo élément pour parler à namp;rsquoimporte quoi: après chaque élément cible. Le résultat est que le contenu spécifié obtient une couleur de texte gris clair (HTML hexadécimal AAA).
La sélection complexe des pseudoclasses CSS3 nous amène à cette ligne:. Menu de navigation. В item: Not (: First Child): Not (: Last Child): after {content: amp;lsquo(Checkout!)amp;rsquo} Ceci sélectionne les éléments suivants: les éléments situés à lamp;rsquointérieur damp;rsquoun élément avec une classe de menu de navigation, les éléments avec une classe damp;rsquoélément de navigation, les éléments qui ne sont pas le premier enfant de son parent, et les éléments qui ne sont pas le dernier enfant de son parent. La règle insère ensuite le contenu après chaque élément. Le résultat est le contenu spécifié (ou vérifié!), Apparaît après le deuxième et le troisième des quatre éléments. Inconvénients de cette méthode cette méthode est puissante, mais il est préférable de lamp;rsquoutiliser en dernier recours lorsque la Bibliothèque de code PHP du site Web namp;rsquoest pas accessible ou ne vaut pas la peine damp;rsquoêtre réparée. Namp;rsquooubliez pas quamp;rsquoen ajoutant des classes CSS simples et anciennes au bon endroit, nous pouvons faire tout ce qui précède plus facilement. Les inconvénients spécifiques damp;rsquoune forte dépendance à lamp;rsquoégard du pseudo sélecteur CSS sont notamment sa fragilité. Dans lamp;rsquoexemple ci dessus, presque tous les styles que nous avons écrits sont corrompus parce quamp;rsquoils contiennent un cinquième élément de menu. Camp;rsquoest opaque. Lamp;rsquoajout damp;rsquoune grande quantité de contenu à partir damp;rsquoune feuille de style de sujet peut embrouiller les développeurs potentiels, y compris . La Feuille de style css namp;rsquoest pas la première hypothèse de quiconque lorsquamp;rsquoun mystère apparaît sur la page. Elle namp;rsquoest pas bien soutenue. Encore une fois, le navigateur samp;rsquoaméliore, mais avec un cve simple, serez plus en sécurité
