Quels sont les nouveaux sélecteurs en CSS3 ?

Les sélecteurs CSS3 incluent : "[att^="val"]", "[att$="val"]", "[att*="val"]", ":root", " : nth-child(n)", ":last-child", ":only-child", ":empty" et ainsi de suite.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Nouveau sélecteur CSS3

Sélecteur d'attribut (la plupart des navigateurs sauf la prise en charge des appareils IE6)

E[att^="val"] Éléments dont la valeur d'attribut att commence par "val"

E[att$="val" ] Éléments dont la valeur de l'attribut att se termine par "val"

E[att*=" val"] La valeur de l'attribut att contient la chaîne de l'élément "val"

Instance : p[id^="nav"] {background:#000;}

Sélecteur de pseudo-classe de structure (Sélecteur de filtre)

(Remarque : FireFox 1.5/2.0/3.0 prend en charge E:root, FireFox 3.0 prend en charge E:last-child, E:empty, car IE6 /7/8 n'est pas pris en charge, donc choisissez la scène appropriée à utiliser )

E:nth-child(n) Correspond au nième élément enfant de son élément parent, le premier nombre est 1p:nth-child(3) { color :#f00 ; }3E:nth-last-child(n) Correspond au nième élément enfant du dernier de ses élément parent, le premier Le nombre est 1p:last-child { background:#ff0; }4E:nth- of-type(n ) est similaire à :nth-child(), mais ne correspond qu'aux éléments utilisant la même balise p:nth-of-type(2){color:red ;}Sélectionnez le nième élément enfant p10E:only-of-type Correspond au seul élément enfant utilisant la même balise sous l'élément parent, ce qui équivaut à : first-of -type:dernier -de-type ou:ntième-de-type(1):ntième-dernier-de-type(1)11 E:empty correspond à un élément qui ne contient aucun élément enfant. Notez que les nœuds de texte sont également considérés comme des éléments enfants p:empty { background:#ff0 }

Sélecteur de pseudo-classe de statut d'interface utilisateur (non pris en charge par IE6/7/8)

Numéro de série	Sélecteur	Signification	Instance
1	E:root	correspond à l'élément racine du document. Pour les documents HTML, il s'agit de l'élément HTML
2<.>
5	E:nth-last-of-type(n)	et:nth-last-child () fonctionne de la même manière, mais ne correspond qu'aux éléments utilisant la même balise
6	E:last-child	correspond le dernier élément enfant de l'élément parent, équivalent à : nth-last-child(1)
7	E : premier de -type	correspond au premier élément enfant utilisant la même balise sous l'élément parent, ce qui équivaut à : nth-of-type(1)
8	E:last-of-type	correspond au dernier élément enfant en utilisant la même balise sous l'élément parent, ce qui équivaut à:nth-last-of-type( 1)
9	E:only-child	correspond au seul élément enfant sous l'élément parent, qui est équivalent à In:first-child:last-child ou:nth-child(1):nth-last-child(1)	p:only-child { background:#ff0 }

序号	选择器	含义	实例
1	E:enabled	匹配表单中激活的元素
2	E:disabled	匹配表单中禁用的元素	input[type="text"]:disabled { background:#ddd; }
3	E:checked	匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
4	E::selection	匹配用户当前选中的元素

Sélecteur universel d'élément de niveau

序号	选择器	含义	实例
1	E ~ F	匹配任何在E元素之后的同级F元素	p ~ ul { background:#ff0; }

反选伪类

匹配不符合当前选择器的任何元素

序号

选择器

含义

实例

1

E:not(s)

序号	选择器	含义	实例
1	E:not(s)	匹配不符合当前选择器的任何元素	:not(p) { border:1px solid #ccc; }

:not(p) { border:1px solid #ccc; }

：target伪类

序号	选择器	含义	实例
1	E:target	匹配文档中特定"id"点击后的效果

序号	选择器	含义	实例
1	E:target	匹配文档中特定"id"点击后的效果

（学习视频分享：css视频教程）

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!