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 )
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<.>
| E:nth-child(n) | Correspond au nième élément enfant de son élément parent, le premier nombre est 1 | p:nth-child(3) { color :#f00 ; } |
3 | E:nth-last-child(n) | Correspond au nième élément enfant du dernier de ses élément parent, le premier Le nombre est 1 | p:last-child { background:#ff0; } |
4 | E: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 p
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 } |
10 | E: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)
序号 |
选择器 |
含义 |
实例 |
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!
Déclaration: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