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:229475parcourir

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 ;

Quel est le sélecteur de base de CSS

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>
	
  • 结果图
    Quel est le sélecteur de base de CSS

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

  • 代码块

nbsp;html>

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

			p {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人,而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	
  • 结果图
    Quel est le sélecteur de base de CSS

类选择器

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

nbsp;html>

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

	
		<h1>成功不是击败别人,而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	
  • 结果图
    Quel est le sélecteur de base de CSS

  • 注意:只要是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>
  • 结果图
    Quel est le sélecteur de base de CSS

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>
  • 结果图

    Quel est le sélecteur de base de CSS

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

结合元素选择器

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

  • 代码块

nbsp;html>

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

	
		<h2>成功不是击败别人,而是改变自己。</h2>
		<span>成功不是击败别人,而是改变自己。</span>
	
  • 结果图
    Quel est le sélecteur de base de CSS

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


多类选择器

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

  • Bloc de code
  • <!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ésultatQuel est le sélecteur de base de CSS

🎜🎜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🎜🎜🎜🎜Quel est le sélecteur de base de CSS🎜
    🎜🎜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
    Quel est le sélecteur de base de CSS🎜🎜🎜🎜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
    Quel est le sélecteur de base de CSS🎜🎜🎜

    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
    Quel est le sélecteur de base de CSS🎜🎜🎜🎜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
    Quel est le sélecteur de base de CSS🎜🎜🎜

    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
    Quel est le sélecteur de base de CSS🎜🎜🎜🎜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