Explication détaillée d'exemples de sélecteurs en CSS3

Texte original en anglais : www.456bereastreet.com/archive/200601/css_3_selectors_explained/ Traduction chinoise : www.dudo.org/article.asp?id=197 Remarque : Cet article a été rédigé en janvier 2006, alors que IE7, IE8 et Firefox3 n'étaient pas encore publiés. Tous les supports de navigateur mentionnés dans l'article n'incluaient pas ces trois versions de navigateurs. Utiliser dans IE8 et Fir
:nth-of-type()
:nth-of-type() pseudo-class et nth-child() pseudo- class La méthode est très similaire, sauf qu'elle correspond aux éléments du type spécifié dans la règle. La règle suivante correspondra à chaque élément p qui appartient au troisième élément enfant de l'élément parent (il peut y avoir plusieurs éléments p appartenant au troisième élément enfant en un seul, mais ils sont situés sous des éléments parents différents, note dudo) :
p:nth-of-type(3) { background:#ff0; >
Cette méthode est utile lorsque vous souhaitez déterminer si le troisième élément p a été pointé. Au début, vous pourriez penser que cela a le même effet que l'utilisation de nth-child, mais nth-child(3) comptera tous les éléments enfants, donc le résultat peut être différent, à moins que tous les éléments frères de p ne soient également des éléments p.
 : la pseudo-classe nième de type n'est actuellement pas prise en charge par les navigateurs.
: pseudo-classe nième-dernier-de-type
 : L'élément pointé par la pseudo-classe nième-dernier-de-type est suivi de plusieurs éléments du même type. Comme la pseudo-classe :nth-last-child, elle compte à rebours à partir du dernier élément enfant. La règle suivante correspondra à l'avant-dernier élément frère p (remarque : il s'agit d'un frère et d'un nœud du même niveau) :
p:nth-last-of-type(2) { background:#ff0 }
:nth-last-of-type() n'est actuellement pas pris en charge par les navigateurs.
:pseudo-classe last-child
:last pseudo-class pointe vers le dernier élément enfant de l'élément parent. Cela a le même effet que :nth-last-child(1). La règle suivante correspond à tous les p qui sont le dernier élément enfant de l'élément parent :
p:last-child { background:#ff0; }
:last-childe pseudo-class can be utilisé dans Mozilla utilisé dans le navigateur. Opera ne prend pas en charge la pseudo-classe :last-childe, et il y a un bug dans Safri (la règle ci-dessus correspondra à tous les éléments p). Étonnamment, cela fonctionne bien dans OmniWeb (version bêta 5.1.1), même si ce navigateur est basé sur Safari. Cela est probablement dû au retour de la dernière version de WebKit d'Apple, car OmniWeb utilise généralement une version de WebKit légèrement inférieure à celle de Safari.
: pseudo-classe premier du type
: pseudo-classe premier du type pointe vers le premier élément parmi les éléments du même type. C'est la même chose que :nth-of-type(1).
p:first-of-type { background:#ff0;>
:la pseudo-classe first-of-type n'est actuellement pas prise en charge par les navigateurs.
:pseudo-classe du dernier type
:pseudo-classe du dernier type pointe vers le dernier élément parmi les éléments du même type. C'est la même chose que nth-last-of-type(1).
p:last-of-type { background:#ff0;>
:la pseudo-classe last-of-type n'est actuellement pas prise en charge par les navigateurs.
:pseudo-classe enfant unique
:la pseudo-classe enfant unique pointe vers des éléments qui n'ont aucun autre élément enfant dans leurs éléments parents. C'est la même chose que :first-child:last-child ou :nth-child(1):nth-last-child(1) (ce dernier n'est pas assez professionnel et concis).
p:only-child { backgound:#ff0;>
:only-childe pseudo-class est actuellement disponible dans les navigateurs basés sur Mozilla. Dans Safari, cela semble être interprété comme : premier enfant (la règle ci-dessus sera appliquée à tous les premiers éléments enfants p du document).
 : pseudo-classe de type uniquement
 : pseudo-classe de type uniquement pointe vers les éléments parents qui n'ont plus d'éléments enfants du même type. C'est la même chose que :first-of-type:last-of-type ou :nth-of-type(1):nth-last-of-type(1) (ce dernier n'est pas assez professionnel).
p:only-of-type { background:#ff0;>
:only-of-type pseudo-class n'est actuellement pas pris en charge par les navigateurs.

[Recommandations associées]

1. Tutoriel vidéo gratuit CSS3

2 Intégrer 20 propriétés CSS/CSS3 courantes <.>

3.

h5 et CSS3 pour créer une zone de saisie avec un texte d'invite

4

Partagez plusieurs derniers attributs CSS3 couramment utilisés 5.

Utilisez CSS pour créer de petits coins pointus et des effets de bulles dans la boîte de discussion

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!