Introduction aux nouveaux sélecteurs CSS et pseudo-classes dans les compétences du didacticiel HTML5_html5

Selector
p[name^="my"]{font-size:14px}
Selector^= applique la règle à toutes les balises d'élément

dont l'attribut name commence par "my" p[ name$="my"]{font-size:14px}
Selector$= applique la règle à toutes les balises d'élément

dont l'attribut name se termine par "my"
p[name*= "my" ]{font-size:14px}
Selector$= applique la règle à tous les éléments

dont l'attribut name contient "my" à la fin
Selector> , ,~
Selector > indique que le l'élément affecté est un enfant du premier élément.
Sélecteur Ce sélecteur fait référence à l'élément qui suit immédiatement l'élément. Les deux éléments doivent avoir le même parent.
Selector~ est similaire à , mais l'élément affecté ne suit pas nécessairement le premier élément.

Ajoutez ":" entre le nom de la pseudo-classe et l'élément référencé
Exemple : maclasse:nth-child(2)
Le deuxième élément de l'élément maclasse
Mot-clé " impair", "pair"
myclass:nth-child(impair) : affecte le
dont la position d'index de l'élément parent est un nombre impair
myclass:nth-child(even) : affecte le
dont La position de l'index de l'élément parent est un nombre pair

Copier le code

Le code est le suivant :

< ;style>
.test:ntième-enfant (impair)
{
couleur:Bleu
}
.test:ntième-enfant (pair)
{
couleur : Rouge;
}
. test:nth-child(2)
{
couleur : Vert
}
"test">

1

;

1

;

1

Effet Comme suit :
1
2
1
2
1
2
Pseudo-classe négative
:non (p){color:red}

sauf< Tous les éléments autres que l'élément ;p>