Maison > Article > interface Web > Quel est le sélecteur de base de CSS

Quel est le sélecteur de base de CSS

青灯夜游original: 2021-11-02 18:25:229466parcourir

Les sélecteurs de base du CSS font référence à : 1. Sélecteur de caractères génériques ; 2. Sélecteur de balises ; 3. Sélecteur d'identifiant ; 5. Sélecteur d'éléments combinés ;

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

Introduction aux sélecteurs de base

Les sélecteurs de base sont divisés en six méthodes d'utilisation : telles que le sélecteur de caractères génériques, le sélecteur de balises, le sélecteur de classe, le sélecteur d'identifiant, le sélecteur d'éléments combinés et le sélecteur multi-classes.
Fiche d'instructions d'utilisation du sélecteur de base.

Sélecteur	Format de syntaxe	Signification	Exemple
Sélecteur de caractères génériques	*{Attribut : valeur;}	Le sélecteur universel peut sélectionner tous les éléments sur la page et Appliquer des styles à eux, indiqués par *. Il n'est pas recommandé de l'utiliser. IE6 ne le prend pas en charge et augmentera la charge sur les grands sites Web.	*{width: 300px;}
Sélecteur de balise	Nom de la balise {attribut: valeur;}	Sélecteur de balise, correspondant à la balise HTML correspondante.	h1{color: red;}
Sélecteur de classe	.classattribut value {attribut:value;}	Le sélecteur de classe définit les styles pour les éléments avec des valeurs d'attribut de classe spécifiées.	.box{color: red;}
Sélecteur d'identifiant	#id attribue la valeur {attribute: value;}	Sélecteur d'identifiant, dans un document HTML, le sélecteur d'identifiant sera utilisé une fois, et une seule fois. Les sélecteurs d'identifiant sont définis avec #.	#box{color: red;}
Combiné avec le sélecteur d'élément	nom de la balise valeur de l'attribut .class {attribut: valeur}	Le sélecteur sélectionnera les éléments en fonction du nom de la balise qui contient l'attribut .class spécifié valeur.	p.box {color:red;}
Sélecteur multi-classes	.class attribue la valeur.class attribue la valeur {attribut: valeur;}	En reliant deux sélecteurs de classe ensemble, sélectionnez uniquement les éléments qui contiennent les deux de ces noms de classe (dans n’importe quel ordre). Remarque : Dans les versions antérieures à IE7, Internet Explorer sur différentes plates-formes ne gérait pas correctement les sélecteurs multi-types.	.box.box1{couleur:rouge;}

Wildcard Selector

Entrons ensuite dans la pratique du sélecteur universel. L'auteur utilise le formulaire intégré pour combiner la balise h1 et p dans la page <code>HTML. . La couleur de la police dans la balise est définie sur rouge. HTML页面中的h1标签和p标签中的字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<style>
			* {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

结果图

Quel est le sélecteur de base de CSS

标签选择器

接下来让我们进入标签选择器实践，笔者以嵌入式的形式，将HTML页面中的h1标签和p标签中的字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

结果图

Quel est le sélecteur de base de CSS

注意：标签选择器是指给指定的标签设置样式。

代码块

nbsp;html>

	
		<meta>
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>

结果图
现在大家应该知道了p标签为什么没有改变了，因为标签选择器的作用是给指定的标签设置样式的，接下来笔者将p标签的字体颜色设置为红色。
代码块

nbsp;html>

	
		<meta>
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}

			p {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>

结果图

类选择器

接下来让我们进入类选择器实践，笔者以嵌入式的形式，使用类的属性值为.box，来完成HTML页面中的h1标签和p标签中的字体颜色设置为红色。
首先我们将HTML页面中的第一个h1标签字体颜色设置为红色。
代码块

nbsp;html>

	
		<meta>
		<title>类选择器</title>
		<style>
			.box {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>

结果图
注意：只要是class属性的值为.box的标签，不管它是什么标签，都会将字体颜色设置为红色，其余的CSS样式也是一致。
现在我们将第二个h1标签和p标签字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
    <style>
        .box{
            color:red;
        }
    </style>
</head>

<body>
    <h1 class="box">成功不是击败别人，而是改变自己。</h1>
	<h1 class="box">PHP中文网</h1>
	<p class="box">PHP中文网</p>
</body>
</html>

结果图

Id选择器

接下来让我们进入id选择器实践，笔者以嵌入式的形式，通过id属性值为#box，将HTML页面中的h1标签中的字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			#box {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1 id="box">成功不是击败别人，而是改变自己。</h1>
	</body>
</html>

结果图
注意：使用id选择器是给拥有指定的id属性值来设置样式，但是要注意在一个HTML页面中id的属性值必须是唯一的。

结合元素选择器

接下来让我们进入结合元素选择器实践，笔者以嵌入式的形式，通过h2标签class属性值为.box元素的字体颜色，设置为红色。
代码块

nbsp;html>

	
		<meta>
		<title>结合元素选择器</title>
		<style>
			h2.box {
				color: red;
			}
		</style>
	

	
		<h2>成功不是击败别人，而是改变自己。</h2>
		<span>成功不是击败别人，而是改变自己。</span>

结果图
注意：结合元素选取器执行原理说明如下：首先是先找到h2标签，然后再去h2标签中找class属性值为.box，如果找到class属性值为.box就给其设置样式。现在大家应该知道了span标签下面的class属性值为.box为什么没有渲染的原因了。

多类选择器

接下来让我们进入多类选择器实践，笔者以嵌入式的形式，将class属性值包含.box和.box1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多类选择器</title>
		<style>
			.box.box1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h2 class="box1 box">成功不是击败别人，而是改变自己。</h2>
		<span class="box box1">成功不是击败别人，而是改变自己。</span>
		<h2 class="box1 ">PHP中文网</h2>
		<span class="box">PHP中文网</span>
	</body>
</html>

Photo du résultat Quel est le sélecteur de base de CSS

🎜🎜

🎜

Sélecteur de balises🎜🎜🎜Entrons ensuite dans la pratique du sélecteur de balises. L'auteur utilise le formulaire intégré pour utiliser `La police la couleur de la balise <code>h1` et de la balise `p` de la page HTML est définie sur rouge. 🎜🎜🎜Bloc de code🎜🎜🎜rrreee🎜🎜🎜Photo du résultat🎜🎜🎜🎜🎜
🎜🎜Remarque : Le sélecteur de balise fait référence à la définition du style de la balise spécifiée. 🎜🎜🎜🎜🎜🎜Bloc de code🎜🎜🎜rrreee🎜🎜🎜Image du résultat
🎜🎜🎜🎜Maintenant, tout le monde devrait savoir pourquoi la balise `p` n'a pas changé, car le rôle du sélecteur de balise est d'attribuer le balise spécifiée Pour définir le style, je règle ensuite la couleur de police de la balise `p` sur rouge. 🎜🎜🎜🎜Bloc de code🎜🎜🎜rrreee🎜🎜🎜Image du résultat
🎜🎜🎜
Class Selector🎜🎜🎜Entrons ensuite dans la pratique du sélecteur de classe L'auteur utilise un formulaire intégré, utilisez l'attribut. la valeur de la classe doit être `.box` pour compléter la balise `h1` et la balise `p` dans la page Police `HTML`. la couleur est réglée sur rouge. 🎜🎜Tout d'abord, nous définissons la couleur de police de la première balise `h1` de la page `HTML` sur rouge. 🎜🎜🎜Bloc de code🎜🎜🎜rrreee🎜🎜🎜Image du résultat
🎜🎜🎜🎜Remarque : Tant que la valeur de l'attribut `class` est `.box`, quelle que soit la balise c'est le cas, la couleur de la police sera définie sur rouge et le reste des styles `CSS` sera le même. 🎜🎜🎜🎜Maintenant, nous définissons la couleur de police de la deuxième balise `h1` et de la balise `p` sur rouge. 🎜🎜🎜🎜Bloc de code🎜🎜🎜rrreee🎜🎜🎜Image du résultat
🎜🎜🎜
Sélecteur d'identifiant🎜🎜🎜Entrons ensuite dans la pratique du sélecteur `id`, dans un formulaire, l'auteur utilise la valeur de l'attribut `id` comme `#box` pour modifier la balise `h1` dans la page `HTML`. La couleur de la police est définie sur rouge. 🎜🎜🎜Bloc de code🎜🎜🎜rrreee🎜🎜🎜Image du résultat🎜🎜 8. png" alt="Quel est le sélecteur de base de CSS"/>
🎜🎜🎜🎜Remarque : Utilisation du sélecteur `id` consiste à définir le style avec la valeur d'attribut `id` spécifiée, mais veuillez noter que la valeur d'attribut de `id` doit être unique dans une page `HTML`. 🎜🎜🎜
Sélecteur d'éléments combinés🎜🎜🎜🎜Entrons ensuite dans la pratique de la combinaison de sélecteurs d'éléments L'auteur utilise la balise `h2` dans une forme intégrée La valeur. de l'attribut `class` est la couleur de police de l'élément `.box`, qui est définie sur rouge. 🎜🎜🎜🎜Bloc de code🎜🎜🎜rrreee🎜🎜🎜Image du résultat
🎜🎜🎜🎜Remarque : Le principe d'exécution du sélecteur d'élément est expliqué comme suit : recherchez d'abord la balise `h2`, puis allez dans h2 La valeur de l'attribut `class` trouvé dans la balise est `.box` Si la valeur de l'attribut `class` est. trouvé, la valeur est `.box` Stylisez-la simplement. Maintenant, tout le monde devrait savoir la raison pour laquelle la valeur de l'attribut `class` sous la balise `span` est `.box` et n'est pas rendue. 🎜🎜🎜

Sélecteur multi-classes 🎜🎜🎜🎜 Entrons ensuite dans la pratique du sélecteur multi-classes L'auteur utilise le formulaire intégré pour `class<. la valeur de l> contient la couleur de police des éléments <code>.box` et `.box1` définie sur rouge. 🎜🎜🎜🎜blocs de code🎜🎜🎜rrreee🎜🎜🎜
Remarque : Le principe d'exécution du sélecteur multi-catégories est expliqué comme suit : Tout d'abord, `class`属性值可以设置为多个以空格隔开即可，举例：如果一个`class`属性值包含`.box`和`.box1`将其设置样式，通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。现在大家应该知道了单独的`class`属性值为`.box`和`.box1` n'est pas rendu.

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

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

Article précédent：Quelle est la signification chinoise du htmlArticle suivant：Quelle est la signification chinoise du html

Articles Liés

Voir plus