Explication détaillée des sélecteurs avancés CSS-tutoriel HTML-php.cn

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

零下一度

Libérer： 2017-07-26 18:00:23

original

1754 Les gens l'ont consulté

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

Copier après la connexion

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 :

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><title>CSS 高级选择器使用</title><style>* {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;}</style></head><body><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li><li>Item 7</li></ul></body></html>

Copier après la connexion

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!