Nouveaux sélecteurs CSS3 : "[attribut^=value]", "[attribute$=value]", "[attribute*=value]", ":first-of-type", ":root", ":empty ", ":cible", etc.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
1.[attribute^=value]correspond à chaque élément dont la valeur d'attribut commence par la valeur spécifiée.[attribute^=value]匹配属性值以指定值开头的每个元素。
2、[attribute$=value]匹配属性值以指定值结尾的每个元素。
3、[attribute*=value]匹配属性值中包含指定值的每个元素。
| 选择器 | 示例 | 示例说明 | CSS |
|---|---|---|---|
| :first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | 3 |
| :last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | 3 |
| :only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | 3 |
| :only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 | 3 |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 | 3 |
| :root | :root | 选择文档的根元素 | 3 |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） | 3 |
| :target | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） | 3 |
| :enabled | input:enabled | 选择每一个已启用的输入元素 | 3 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 | 3 |
| :checked | input:checked | 选择每个选中的输入元素 | 3 |
| :not(selector) | :not(p) | 选择每个并非p元素的元素 | 3 |
| ::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 | 3 |
| :out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 | 3 |
| :in-range | :in-range | 匹配值在指定区间之内的input元素 | 3 |
| :read-write | :read-write | 用于匹配可读及可写的元素 | 3 |
| :read-only | :read-only | 用于匹配设置 "readonly"（只读） 属性的元素 | 3 |
| :optional | :optional | 用于匹配可选的输入元素 | 3 |
| :required | :required | 用于匹配设置了 "required" 属性的元素 | 3 |
| :valid | :valid | 用于匹配输入值为合法的元素 | 3 |
| :invalid | :invalid | 用于匹配输入值为非法的元素 | 3 |
E~F
[attribute$=value]correspond à chaque élément dont la valeur d'attribut se termine par la valeur spécifiée.3.[attribute*=value]correspond à chaque élément dont la valeur d'attribut contient la valeur spécifiée.2. Sélecteur de pseudo-éléments et de pseudo-classes :| Sélecteur | Exemple | Exemple de description | CSS |
|---|---|---|---|
| :premier de type | p:first-of-type | Sélectionnez le premier élément p de chaque élément p qui est son parent | 3 |
| p:last-of-type | Sélectionnez chaque élément p pour être son parent Le dernier p élément | 3 | |
| :only-of-type | p : only-of-typeSélectionne le seul élément p pour lequel chaque élément p est son parent | 3 | |
| :only-child | p:only-child | Sélectionne chaque élément p qui est le seul élément enfant de son parent | 3|
| :nth-child(n) | p:nth-child(2) | Sélectionnez le deuxième élément enfant de chaque élément p qui est son parent | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | La sélection de chaque élément p est le deuxième élément enfant de son parent, à partir du dernier nombre d'enfants | 3|
| :ntième-de-type(n) | p:énième-de-type(2) | Sélectionnez le deuxième élément p pour lequel chaque élément p est son parent | 3 |
| :nth-last-of-type (n) | p:nth-last-of-type(2) | Sélectionnez chaque Un élément p est le deuxième élément p de son parent, en comptant à partir du dernier enfant | 3 |
| :last-child | p:last-child | Sélectionne chaque élément p qui est le dernier enfant de son parent. | 3 |
| :root | :root | Sélectionnez l'élément racine du document3 | |
| :empty | p:emptySélectionnez chaque élément p (y compris les nœuds de texte) qui n'a aucun enfant | 3 | |
| :target | #news:target | Sélectionnez l'élément #news actuellement actif (l'URL sur laquelle vous avez cliqué qui contient le nom de l'ancre) td> | 3 |
| :enabled | input:enabled | Sélectionnez chaque élément d'entrée activé | 3|
| :disabled | input:disabled | Sélectionnez chaque élément d'entrée désactivé | 3 td> |
| :checked | input:checked | Sélectionnez chaque élément d'entrée sélectionné | 3 | tr>
| :not(sélecteur) | :not(p) | Sélectionnez chaque élément qui n'est pas un élément p | 3 |
| :: sélection | ::selection | Faire correspondre la partie de l'élément sélectionnée ou mise en surbrillance par l'utilisateur | 3 |
| : hors plage | :hors plage | Faire correspondre les éléments d'entrée dont les valeurs sont en dehors de la plage spécifiée | 3 |
| :in-range | :in-range | Faire correspondre les éléments d'entrée dont les valeurs se situent dans la plage spécifiée | 3 |
| :read-write | :read-write | Utilisé pour faire correspondre les éléments lisibles et inscriptibles | 3 |
| :read-only | :read-only | est utilisé pour correspondre au paramètre "readonly" (uniquement en lecture ) L'élément d'attribut | 3 |
| :optional | :optional | est utilisé pour correspondre à optionnel L'entrée l'élément | 3 |
| :required | :required | est utilisé pour correspondre à l'élément "required" de l'attribut | 3 |
| :valid | :valid | est utilisé pour correspondre à la valeur d'entrée Légal elements | 3 |
| :invalid | :invalid | est utilisé pour correspondre si la valeur d'entrée est Éléments illégaux | 3 |
E~F
Sélecteur universel (recherche de tous les éléments frères et sœurs suivants)sélectionne l'élément F correspondant et tous les éléments F correspondants situés après l'élément E correspondant (Partage de vidéos d'apprentissage : tutoriel vidéo 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
