Explication détaillée des sélecteurs avancés CSS

CSS est l'un des outils les plus puissants dont disposent les concepteurs Web. Grâce à lui, nous pouvons changer l'interface d'un site Web en quelques minutes sans changer les balises de la page. Mais malgré le fait que chacun de nous se rend compte de son utilité, les sélecteurs CSS sont loin d'atteindre leur potentiel, et parfois nous avons tendance à utiliser des classes, des identifiants, des divs, des spans, etc. excessifs et inutiles. Notre HTML est très compliqué.

La meilleure façon d'éviter de laisser ces "fléaux" se propager dans vos balises et de les garder propres et sémantiques est d'utiliser des sélecteurs CSS plus complexes qui peuvent cibler des éléments spécifiques sans utiliser de classe ou d'identifiant supplémentaire, et de cette façon nous peut également rendre notre code et notre style plus flexibles.

Priorité CSS

Avant de plonger dans le domaine des sélecteurs CSS avancés, il est important de comprendre comment fonctionnent les priorités CSS afin de savoir comment utiliser nos sélecteurs de manière appropriée et éviter de perdre beaucoup de temps. déboguer certains problèmes qui peuvent être facilement résolus si l'on fait attention aux priorités

Lorsque nous écrivons du CSS, nous devons faire attention à la cascade de certains sélecteurs Plus haut que d'autres sélecteurs, le sélecteur que nous écrivons à la fin ne le sera pas nécessairement. écrasez les styles que nous avons écrits plus tôt sur le même élément.

Alors comment calculer la priorité d'un sélecteur donné ? C'est assez simple si l'on considère que les priorités sont exprimées sous forme de quatre nombres séparés par des virgules, comme : 1, 1, 1, 1 ou 0, 2, 0, 1

le premier chiffre ( a) est généralement 0, à moins que l'attribut style est utilisé sur la balise ;

Le deuxième nombre (b) est la somme du nombre d'identifiants sur le sélecteur

Le troisième nombre (c) est la somme des autres ; sélecteurs d'attributs et pseudo-classes utilisés sur ce sélecteur. Cela inclut les sélecteurs de classe (.example) et d'attribut (tels que li[id=red]

Le quatrième nombre (d) compte les éléments (comme table, p, div, etc.) et les pseudo-éléments ; (Comme : première ligne, etc.);

Le sélecteur universel (*) a 0 priorité

Si deux sélecteurs ont la même priorité, c'est celui de la feuille de style qui fonctionne.

Regardons quelques exemples pour que ce soit plus facile à comprendre :

#sidebar h2 — 0, 1, 0, 1

h2.title — 0, 0 , 1, 1

h2 + p — 0, 0, 0, 2

#sidebar p:first-line — 0, 1, 0, 2

ci-dessous Dans Dans l'exemple, le premier fonctionnera car il a une priorité plus élevée que le second :

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2

Il est important d'avoir au moins une compréhension de base du fonctionnement des priorités, mais certains outils comme Firebug , lorsque nous inspectez un élément spécifique, il est utile de lister tous les sélecteurs CSS par ordre de priorité de sélecteur pour nous faire savoir quel sélecteur est valide sur un élément spécifique.

Les exemples suivants expliquent principalement l'utilisation du nième-enfant, du premier-enfant, du dernier-enfant, du nième-de-type, du premier-de-type et du dernier-de-type.

Exemple de code :

76c82f278ac045591c9159d381de2c57f2fff6a208c3e290698f287c1c0e7a5393f0f5c25f18dab9d176bd4f6de5d30e03fc48c6e8e131d94ca98b8e034341f4b2386ffb911b14667cb8f0f91ea547a7CSS 高级选择器使用6e916e0f7d1e588d4f442bf645aedb2fc9ccee2e6ea535a969eb3f532ad9fe89* {padding: 0;margin: 0;}/*IE8不支持 IE9支持*/
            li:nth-child(3n+1) {color: red;}/*IE7+以上浏览器均支持*/
            li:first-child {color: blue;}/*IE8不支持 IE9以上支持*/
            li:last-child {color: green;}/*IE8不支持 IE9以上支持*/
            li:nth-of-type(odd) {color: #8D8D8D;}/*IE8不支持 IE9以上支持*/
            li:first-of-type {color: #92B8B1;}/*IE8不支持 IE9以上支持*/
            li:last-of-type {color: #2E2D3C;}531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86dff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6Item 1bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 2bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 3bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 4bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 5bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 6bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 7bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b94468936cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

Résumé :

Sauf que le sélecteur de premier enfant est compatible avec IE7+ et supérieur, tous les autres les sélecteurs sont Il nécessite le navigateur IE9 ou supérieur pour être compatible .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!