Introduction au nouveau sélecteur CSS et pseudo-classe ajoutés à HTML5

Commentaire: HTML5 a ajouté un nouveau sélecteur CSS et une pseudo-catégorie. Cet article en a compilé et a donné une simple introduction à l'utilisation. Des amis qui aiment le HTML5 peuvent y faire référence. J'espère que ce sera utile à tout le monde.

p [nom ^ = my] {Font-Size: 14px}

Sélecteur ^ = des règles sont appliquées à toutes les balises d'élément <p> avec des attributs de nom à commencer par mon

p [name $ = my] {Font-Size: 14px}

Sélecteur $ = règles s'appliquent à tous les attributs de nom se terminant avec mes balises élémentaires <p>

p [nom * = my] {Font-Size: 14px}

Sélecteur $ = des règles sont appliquées à tous les attributs de nom contenant les éléments <p> se terminant par mon

Sélecteur>, +, ~

Sélecteur> signifie que l'élément affecté est un enfant du premier élément.

Sélecteur + Ce sélecteur fait référence à l'élément immédiatement suivant l'élément, et ces deux éléments doivent avoir le même parent.

Le sélecteur ~ est similaire à +, mais l'élément affecté ne suit pas nécessairement le premier élément.

Ajoutez le nom de la pseudo-classe et l'élément de référence:

Exemple: MyClass: nième enfant (2)

Le deuxième élément de MyClass Element

mot-clé étrange, même

MyClass: Nth-Child (Odd): affecte la position d'index de son élément parent avec un nombre impair

MyClass: nième-enfant (même): affecte la position d'index de son élément parent

<style>

.Test: Nth-Child (Odd)

{

Couleur: bleu;

}

.Teste: nième enfant (même)

{

Couleur: rouge;

}

.Teste: nième enfant (2)

{

Couleur: vert;

}

</ style>

<div>

<p>

1

</p>

<p>

2

</p>

</div>

<p>

1

</p>

<p>

2

</p>

<p>

1

</p>

<p>

2

</p>

Les effets sont les suivants:

1

2

1

2

1

2

Nier les pseudo-classes

: pas (p) {couleur: rouge}

Tous les autres éléments à l'exception de l'élément <p> sont rouges