Quels nouveaux sélecteurs sont ajoutés à CSS3 ?

Les nouveaux sélecteurs en CSS3 incluent : ":first-of-type", ":last-of-type", ":last-child", ":root", ":empty", ":target", " :enabled", ":disabled", ":valid", etc.

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

Pour utiliser CSS pour obtenir un contrôle un-à-un, un-à-plusieurs ou plusieurs-à-un des éléments d'une page HTML, vous devez utiliser des sélecteurs CSS.

Les éléments des pages HTML sont contrôlés via des sélecteurs CSS.

Les sélecteurs CSS sont utilisés pour sélectionner le modèle d'éléments que vous souhaitez styliser.

Nouveaux sélecteurs en CSS3

Les nouveaux sélecteurs en CSS3 sont principalement divisés en quatre catégories : les sélecteurs d'attributs, les sélecteurs de relations, les sélecteurs de pseudo-classes structurés et les sélecteurs de pseudo-éléments. L'introduction spécifique est la suivante :

1. Sélecteur d'attributs

Le sélecteur d'attributs peut sélectionner des balises en fonction des attributs et des valeurs d'attribut des balises de page Web.

Les sélecteurs d'attribut incluent principalement E[att^=value], E[att$=value] et E[att*=value] Ces trois sélecteurs de sexe. E[att^=value]、E[att$=value]和E[att*=value]这三种性选择器。

2、关系选择器

CSS3中的关系选择器主要包括子代选择器和兄弟选择器。

(1)关系选择器

(2)临近兄弟选择器

(3)普通兄弟选择器

3、结构化伪类选择器

结构化伪类选择器可以减少文档内class属性和id属性的定义，使文档变得更加简洁。

4、伪元素选择器

伪元素选择器一般是一个标记后面紧跟英文冒号“:

2. Sélecteur de relation

Le sélecteur de relation en CSS3 comprend principalement un sélecteur de descendant et un sélecteur de frère ou sœur. 🎜🎜(1) Sélecteur de relation🎜🎜(2) Sélecteur de frères et sœurs à proximité🎜🎜(3) Sélecteur de frères et sœurs ordinaires🎜🎜🎜3. Sélecteur de pseudo-classe structuré🎜🎜🎜Le sélecteur de pseudo-classe structuré peut réduire le contenu du document La définition des attributs de classe et des attributs id rend le document plus concis. 🎜🎜🎜4. Sélecteur de pseudo-élément 🎜🎜🎜Le sélecteur de pseudo-élément est généralement une marque suivie d'un deux-points anglais ":", et le deux-points anglais est suivi du nom du pseudo-élément. 🎜🎜🎜Nouvelle liste de sélection en CSS3🎜🎜 3[a[src^="https"]Sélectionnez les éléments dont la valeur de chaque attribut src commence par "https"3[ a[src$=".pdf"]Sélectionnez les éléments dont la valeur de l'attribut src se termine par ".pdf"3[a[src*="44lan"]Sélectionnez chaque élément dont la valeur de l'attribut src contient la sous-chaîne "44lan"3:first-of-typep :first-of-type Sélectionne le premier élément 3 :last-of-typep :last-of-type sélectionne chaque 3 :only-of-typep: only-of-type sélectionne le seul :enfant unique

:nth-child(n

:nth-last-child(n

:nth-of-type(n

:nth-last-of-type(n

:dernier-enfant

3:target#news:targetSélectionne l'élément #news actuellement actif (l'URL cliquée qui contient ce nom d'ancre) 3: activéinput:enabled:disabled:check ed:not(selector

3::selection::selectionLa partie de l'élément correspondant qui est sélectionnée ou mise en évidence par l'utilisateur3:hors de portée:hors de portée > dont la valeur est en dehors de la plage spécifiée

Sélecteur	Exemple	Exemple de description	CSS
element1~element2	p~ul	Select
attribut^=value]
attribute $=value]
attribute* =value ]
		de chaque élément qui est son parent
		élément qui est le dernier élément
		< P> élément qui est le seul élément de son parent 3
p:enfant unique	Sélectionnez chaque élément	qui est le seul élément enfant de son parent 3
)p:nth-child(2)	Sélectionnez chaque élément A	est le deuxième élément enfant de son parent 3
)p:nth-last-child(2)	Sélectionne chaque	élément qui est le deuxième enfant de son parent, en comptant à partir de le dernier enfant 3
)p: nth-of-type(2)	Sélectionne chaque	élément qui est le deuxième element 3
)p:nth-last-of-type(2)	sélectionne chaque	élément qui est le deuxième élément de son parent, à partir du nombre de derniers enfants 3
p:dernier-enfant	Sélectionne chaque	élément qui est le dernier enfant de son parent. 3 Éléments (y compris les nœuds de texte)
		Sélectionnez chaque élément d'entrée activé 3
input:disabled	Sélectionnez chaque élément d'entrée désactivé	3
entrée : coché	Sélectionnez chaque élément d'entrée sélectionné	3
)	:not(p)	Sélectionnez chaque élément qui n'est pas un élément
		correspond à < input	elements	3
:dans la plage	:dans la plage	correspond à <entrée>éléments	3
:lecture-écriture	: lire-écrire	est utilisé pour faire correspondre les éléments lisibles et inscriptibles	3
:read-only	:read-only	est utilisé pour faire correspondre ceux avec l'ensemble d'attributs "readonly" Element	3
:facultatif	: Facultatif	est utilisé pour faire correspondre les éléments d'entrée en option	3
: requis	: requis	est utilisé pour faire correspondre les éléments avec le jeu d'attribut "requis"	3
: valide	:valid	est utilisé pour faire correspondre les éléments dont la valeur d'entrée est légale	3
:invalid	:invalid	est utilisé pour faire correspondre les éléments dont la valeur d'entrée est illégale	3

Extended connaissances : liste de sélecteurs css1, css2

élément élémentélémentelement+element[attributeattributevaleur Sélectionnez tous les éléments avec target="_blank"attributevalueSélectionnez le titre L'attribut contient tous les éléments avec le mot "fleur"attributelangueSélectionnez tous les éléments avec une valeur de départ de lang attribut="EN" Élément 1:actifSélectionnez lorsque la souris est sur le lien:Sélectionnez la première lettre de chaque élément

::first-line

p:first-line:first -childSpécifie le style uniquement si l'élément

est le premier enfant de son parent.

2::beforep::before:Insérer du contenu après chaque élément

languep:lang(it)

sélecteur	exemple	exemple de description	CSS
.classe	.intro	Choisir Tout sélectionner éléments avec class="intro"	2
element	p	sélectionnez tous les éléments ; éléments et < ;p> ; élément	1
		div p	sélectionne tous les éléments dans l'élément
div>pSélectionne tous les éléments dont le parent est un élément	2
div+p	sélectionne tous les éléments < p> après l'élément div>	2
][	=	]	[target=_blank]
2[	~=	]	[title~=flower]
2[	|=	]	[lang|=en]
2	:link	a:link	Sélectionner tous les liens non visités
:visiteda:visited	Sélectionner tous les liens visités	1
a:activeSélectionnez le lien actif1		:hover	a:hover
1:focus	input:focus	Sélectionnez l'élément d'entrée avec le focus	2
::first-letter	p	:first-letter
:		Sélectionne la première ligne de chaque élément :
	Insérer du contenu avant chaque élément p	:après
2		::lang(	)
Choisissez une valeur de départ pour l'attribut lang Tous	2	(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)

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!