Maison  >  Article  >  interface Web  >  Quels sont les nouveaux sélecteurs en CSS3 ?

Quels sont les nouveaux sélecteurs en CSS3 ?

青灯夜游
青灯夜游original
2021-04-08 19:10:064166parcourir

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

Quels sont les nouveaux sélecteurs en CSS3 ?

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!

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