En CSS 3, supposons que vous créiez un fichier HTML contenant la structure de balises suivante :
<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>
Ensuite, dans le fichier CSS
div[id^="nav"] { arrière-plan :#ff0 }
Notez le " ^ "
CSS contrôlera [u]div#nav-primary et div#nav-secondary[/u] dans ce cas. Attention, ces deux étiquettes sont précédées de nav , on ne sait pas s'il est séparé par "-" ou si l'ID correspond d'avant en arrière [sueur]
div[id$="primary"] { arrière-plan :#ff0 }
Notez qu'il s'agit de " $ "
CSS contrôlera [u]div#nav-primary et div#content-primary[/u] dans ce cas. Veuillez noter qu'il y a primar après ces deux balises. Il n'est pas clair si "-" est utilisé comme séparation ou si l'ID correspond de l'arrière vers l'avant [sueur]
div[id*="content"] { background:#ff0 }
Notez qu'il s'agit de " * "
CSS dans ce cas contrôlera [u]div#content-primary div#content-secondary et div#tertiary-content[/u]. Veuillez noter que ces balises contiennent toutes du contenu . Il n'est pas clair si elles sont séparées par "-" ou si l'ID est automatiquement analysé et mis en correspondance [sweat]
Il semble que l'auteur ait dit que ces balises sont désormais prises en charge par les dernières versions de divers navigateurs, à l'exception d'IE. Vous pouvez l'essayer, mais je ne l'essaierai pas ~ [lol]
div#content-primary:target { contour:1px solide #300 }
Notez que " :target "
Dans ce cas, CSS contrôlera le lien d'ancrage http://www.example.com/index.html #content-primary (le lien d'ancrage peut être compris comme un lien au sein d'une page Web, comparé au retour observé sur certains sites Web. pages) haut )
L'auteur dit que les navigateurs Mozilla et Safari le prennent désormais en charge
input[type="text"]:enabled { background:#ffc }
input[type="text"]:disabled { background:#ddd }
Notez que " [type="text"]:enabled "
C'est le CSS qui contrôle le formulaire. "[u][type="text"][/u]" semble signifier que le type du formulaire est du texte. . . Que sera [u]type="password"[/u] ?
entrée : vérifié { border : 1px solide #090 ;
Notez que " :checked "
C'est le CSS qui contrôle la "sélection" du formulaire. . .
L'auteur affirme que les navigateurs Opera et Mozilla les prennent désormais en charge.
:root { arrière-plan:#ff0 }
html{arrière-plan :#ff0}
Veuillez faire attention à " :root "
Ce ":root" est une balise de niveau supérieur au HTML. Vous pouvez lire cet article écrit par Chidori Ichiba pour comprendre correctement le HTML et le corps. Il a découvert dans l'article qu'il existe un cadre en dehors du HTML, hehe~.
L'auteur dit que les navigateurs Mozilla et Safari le prennent désormais en charge
La suivante : nth-child() est plus intéressante, haha~ Vous pouvez mettre des chiffres et des lettres par défaut entre parenthèses~
p:ntième-enfant(3) { couleur:#f00 }
Cela semble signifier que sur la base du premier P apparaissant, tous les P multiples de "3" seront contrôlés ~
p:ntième-enfant (impair) { couleur:#f00 }
Cela semble signifier qu'en fonction du premier P qui apparaît, tous les nombres impairs de P seront contrôlés ~
p:ntième-enfant (pair) { couleur:#f00 }
Cela semble signifier qu'en fonction du premier P qui apparaît, tous les P en nombres pairs seront contrôlés ~
p:ntième-enfant(3n+0) { couleur:#f00 }
p:ntième-enfant(3n) { couleur:#f00 }
Ces deux tags sont équivalents, car le 0 après le premier n'a aucun effet. Cela signifie que P qui est 3 fois le premier P qui apparaît sera contrôlé~ (Quel twist, HOHO~ [ rolleyes]) Autrement dit. , ce "n" prendra une valeur comprise entre 0.1.2.3.4.5.6....~ Autant de P que vous pourrez calculer seront contrôlés. . .
tr:ntième-enfant(2n+11) { background:#ff0 }
Si vous comprenez ce qui précède, ce n'est pas difficile à comprendre, mais l'étiquette qu'il contrôle a changé en "tr". Cela signifie que le tableau deviendra plus varié. Je pense que tout le monde doit être bon en arithmétique à l'école primaire et ne pas apprendre. eh bien, rentrez vite chez vous et apprenez à nouveau quelques calculs élémentaires. . . (Cependant, une telle étiquette augmente-t-elle l'efficacité du traitement informatique ? [confus] J'espère que ma frustration est inutile...)
p:dernier-enfant { background:#ff0 }
A p avant p est contrôlé (NND, p va et vient, frappe pp [sueur])
:not(p) { border:1px solide #ccc }
Ce p n'est pas contrôlé, cela signifie qu'il utilise son propre style. Il doit être utilisé avec les précédents. . .
p ~ ul { arrière-plan:#ff0 }
ul est affiché avec priorité sur p. Je ne sais pas de quelle méthode prioritaire il s'agit. . .
En gros, c’est tout ce que je peux comprendre. Vous pouvez consulter les deux sites Web suivants pour continuer à apprendre. Si j’ai dit quelque chose de mal, n’oubliez pas de me le dire.
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/