Maison > interface Web > tutoriel CSS > le corps du texte

Présentation des nouveaux sélecteurs en CSS3

高洛峰
Libérer: 2017-02-15 13:09:07
original
1492 Les gens l'ont consulté

selector :first-child Ceci est un sélecteur de descendants. Bizarre, faites attention à éviter plutôt qu'à comprendre.

selector:first-child

 当前 selector 选中的元素集合中的第一个元素
Copier après la connexion
Copier après la connexion

selector:last-child

当前 selector 选中的元素集合中的最后一个元素.
Copier après la connexion
Copier après la connexion

selector:last-child


Mais il y a un problème, :last-child ne prend pas effet

devrait être :
1 L'élément parent du sélecteur actuel parent

2 Tous les enfants. éléments du parent, [a,b, c]
  **if(selecor.parent.childElementList.firstElement === selector){
     生效
  }**
Copier après la connexion
Copier après la connexion
3 Le premier élément de la collection d'éléments enfants Si le sélecteur

4 définit le style, il prendra effet.


Utilisez donc ces deux pseudo-classes et ajoutez un élément Parent. Cela peut être considéré comme la première implémentation

nth-child() s'applique également aux règles ci-dessus
Notez que n ici en a beaucoup. de place pour le développement, et peut réaliser impair/pair, lesquels choisir et par lesquels commencer.

nth-last-child() Sélectionnez à l'envers
: premier du type
:last-of-type
: nth-of-type
:nth-last-of-type
:root
sélectionne l'élément racine du document, c'est-à-dire html
. :empty

sélectionne les éléments qui n'ont même pas d'espace dans l'élément

:not
Sélecteur négatif

:only-child
ne prendra effet que lorsque la collection n'en a qu'un element.

::selection
ne peut définir que deux attributs : background, color.

sélecteur : premier enfant Il s'agit d'un sélecteur descendant. Bizarre, faites attention à éviter plutôt qu'à comprendre.
 当前 selector 选中的元素集合中的第一个元素
Copier après la connexion
Copier après la connexion

selector:first -child

当前 selector 选中的元素集合中的最后一个元素.
Copier après la connexion
Copier après la connexion

selector:last-child


Mais il y a un problème, :last-child ne prend pas effet.

devrait être :
1 actuellement L'élément parent du sélecteur parent

2 parent de tous les éléments enfants, [a,b,c]
  **if(selecor.parent.childElementList.firstElement === selector){
     生效
  }**
Copier après la connexion
Copier après la connexion
3 Le premier élément de la collection d'éléments enfants, s'il s'agit du style selector

4 défini, il prendra effet.


Utilisez donc ces deux pseudo-classes et ajoutez-y un élément parent. peut être considéré comme la première implémentation.

nth-child() s'applique également aux règles ci-dessus
Notez qu'il y a beaucoup de place pour le développement. choisir et par lesquels commencer.

nth-last-child() Sélectionnez à l'envers
:first-of-type
:last-of-type
:nth-of- type
:nth-last-of-type
:root
Sélectionnez l'élément racine du document C'est du HTML
:empty

Sélectionnez les éléments sans même un espace dans l'élément

 : not
Sélecteur négatif

:only-child
Utilisé uniquement lorsque la collection n'a qu'un seul élément prendra effet.

::selection

ne peut définir que deux attributs : arrière-plan, couleur.

Pour plus d'aperçu du nouveau sélecteur CSS3, veuillez prêter attention aux articles connexes du site Web PHP chinois !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal