Que signifie le sélecteur CSS ?

En CSS, le sélecteur est un mode de sélection des éléments qui doivent être stylisés ; le sélecteur css spécifie l'objet du style css, c'est-à-dire sur quels éléments de la page Web le "style" agit, le format de syntaxe "sélecteur" {style}". Les éléments des pages HTML sont contrôlés via des sélecteurs CSS.

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

En CSS, un sélecteur est un mode permettant de sélectionner des éléments qui doivent être stylisés.

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.

Chaque définition de style CSS se compose de deux parties, sous la forme suivante : [code] Sélecteur {style} [/code] La partie avant {} est le "sélecteur". Le "sélecteur" spécifie l'objet du "style" dans {}, c'est-à-dire sur quels éléments de la page Web le "style" agit.

Quels sont les sélecteurs en CSS

elementelementelement1element2attribute[target]attributvaleur]attributvaleur]attributvaleur]attributvaleur]attributvaleur]attributvaleur]Sélectionnez un lien actif. Insérer du contenu après chaque

Insérer le contenu avant le contenu de chaque

.

Sélectionne chaque élément Sélectionne l'élément Sélectionne chaque élément Sélectionne chaque élément

Sélectionne chaque élément Sélectionne chaque

.

Sélectionne la première lettre de chaque élément

Sélectionne la première ligne de chaque élément

Sélectionne le premier élément

élément pour chaque élément

Sélectionnez l'élément d'entrée qui obtient le focus. Sélectionne un élément qui est en mode plein écran. Sélectionnez le lien sur lequel se trouve le pointeur de la souris. Sélectionne les éléments d'entrée dont les valeurs se trouvent dans la plage spécifiée. Sélectionnez les éléments d'entrée qui sont dans un état indéterminé. Sélectionne tous les éléments d'entrée avec des valeurs non valides. languep:lang(it)

Sélecteur	Exemple	Exemple de description
.classe	.intro	Sélectionne tous les éléments avec class="intro".
.class1.class2	.name1.name2	Sélectionnez les deux attributs de classe Tous les éléments de nom1 et nom2.
.class1 .class2	.name1 .name2	est sélectionné comme nom de classe Élément name1 Descendants de tous les éléments classname name2.
#id	#firstname	Sélectionnez l'élément avec id="firstname".
*	*	Sélectionnez tous les éléments.
élément	p	Sélectionne tous les éléments
element.class	p.intro	Sélectionner tout avec class="intro"
élément,élément	div, p	sélectionnez tous les éléments Tous les éléments
element element	div p	Sélectionner tout < dans l'élément ;p>
élément > Tous les éléments		+
div + p sélectionnez l'élément immédiatement après le < div> le premier élément		~
p ~ ulSélectionnez les éléments précédés de pour chaque élément	[	]
Sélectionne tous les éléments avec l'attribut cible.	[	=
[target=_blank]Sélectionner avec la cible Tous éléments avec l'attribut ="_blank".	[	~=
[titre~=fleur]Sélectionner le titre L'attribut contient tous les éléments contenant le mot « fleur ».	[	|=
[lang|=fr]Sélectionner la langue Tous les éléments dont la valeur d'attribut commence par "en".	[	^=
a[href^="https"]Sélectionnez chaque élément dont la valeur de l'attribut src commence par "https".	[	$=
a[href$=".pdf"]Sélectionnez tous les éléments dont l'attribut src se termine par ".pdf".	[	*=
a[href*="w3schools"]Sélectionnez chaque élément dont la valeur d'attribut href contient la sous-chaîne "abc".	:active	a:active
	::after	p::after
	::before	p::before
	:checked	input:checked
	:default	input:default
	:disabled	input:disabled
	:empty	p:empty
	:enabled	input:enabled
	:first-child	p:first-child
	::first-letter	p::first-letter
	::first-line	p::first-line
	:first-of-type	p:first-of-type
	:focus	input:focus
	:plein écran	:plein écran
	:hover	a:hover
	:in-range	input:in-range
	:indeterminate	input:indeterminate
	:invalid	input:invalid
	:lang(	)
Sélectionnez l'attribut lang égal à "it" (italien) pour chaque élément
:last-child	p:last-child	Sélectionne chaque élément élément.
:last-of-type	p:last-of-type	Sélectionne le dernier élément Chaque élément
:link	a:link	Sélectionnez tous les liens non visités.
:not(selector)	:not(p)	Sélectionne chaque élément qui n'est pas élément.
:nth-child(n)	p:nth-child(2)	Sélectionne l'élément qui appartient à son parent Le deuxième enfant de chaque élément
:ntième-dernier-enfant(n)	p:ntième-dernier-enfant(2)	Idem comme ci-dessus, en comptant à partir du dernier élément enfant.
:ntième de type(n)	p:ntième de type(2)	Sélectionner Chaque élément appartenant au deuxième élément
:ntième-dernier-de-type(n)	p:ntième-dernier-de-type(2)	Idem que ci-dessus, mais en comptant à partir du dernier élément enfant.
:only-of-type	p:only-of-type	Sélectionne le seul élément élément Chaque élément
:only-child	p:only-child	Sélectionne chaque élément .
:facultatif	input:facultatif	Sélectionne les éléments d'entrée sans l'attribut "obligatoire".
:hors plage	entrée:hors plage	Sélectionnez les éléments d'entrée dont les valeurs sont en dehors de la plage spécifiée.
::placeholder	input::placeholder	Sélectionne un élément d'entrée dont l'attribut "placeholder" est spécifié.
:read-only	input:read-only	Sélectionne les éléments d'entrée pour lesquels l'attribut "readonly" est spécifié.
:read-write	input:read-write	Sélectionne les éléments d'entrée qui ne spécifient pas l'attribut "readonly".
:required	input:required	Sélectionne les éléments d'entrée dont l'attribut "required" est spécifié.
:root	:root	Sélectionne l'élément racine du document.
::selection	::selection	Sélectionne la partie de l'élément que l'utilisateur a sélectionnée.
:target	#news:target	Sélectionne l'élément #news actuellement actif.
:valid	input:valid	Sélectionne tous les éléments d'entrée avec des valeurs valides.
:visité	a:visité	Sélectionnez tous les liens visités.

(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!