Qu'est-ce qu'un sélecteur CSS ? 5 sélecteurs de base courants en CSS3 (exemples de code)-tutoriel CSS-php.cn

Qu'est-ce qu'un sélecteur CSS ? 5 sélecteurs de base courants en CSS3 (exemples de code)

青灯夜游

Libérer： 2019-03-12 14:07:58

original

10336 Les gens l'ont consulté

Dans ce chapitre nous allons vous expliquer qu'est-ce qu'un sélecteur CSS ? 5 sélecteurs de base communs en CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1 : Qu'est-ce que le sélecteur CSS ?

CSS est un langage utilisé pour restituer du HTML, du XML, etc. à l'écran. CSS applique principalement des styles aux éléments correspondants pour restituer les éléments relativement appliqués. Il est important de sélectionner l'élément correspondant. Comment sélectionner l'élément correspondant nécessite ce que nous appelons un sélecteur. En CSS, un sélecteur est un modèle utilisé pour sélectionner les éléments qui doivent être stylisés. Les sélecteurs sont principalement utilisés pour déterminer les nœuds d’éléments DOM dans l’arborescence HTML.

2 : 5 sélecteurs de base courants en CSS3

Il existe de nombreux types de sélecteurs en CSS3. Voici 5 sélecteurs de base courants : sélecteurs génériques, sélecteurs de classe, élément. sélecteurs, sélecteurs d'ID et sélecteurs de groupe.

1. Sélecteur générique (pris en charge par tous les navigateurs)
Le sélecteur universel est représenté par * et est utilisé pour sélectionner tous les éléments sous un certain élément. . ;

*{marigin: 0;
   padding: 0;
   font-size: 14px;
}

Copier après la connexion

Vous devez avoir vu une grande partie du code ci-dessus dans le fichier de style de réinitialisation. Cela signifie que la marge et le remplissage de tous les éléments sont définis sur 0, la taille de la police est définie sur. 14px, et l'autre La première consiste à sélectionner tous les éléments sous un certain élément :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<style>
			.demo * {
				width: 50px;
				height: 50px;
				border:1px solid blue;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div>1</div>
			<p>2</p>
			<span>3</span>
		</div>
	</body>
</html>

Copier après la connexion

Rendu :

Quest-ce quun sélecteur CSS ? 5 sélecteurs de base courants en CSS3 (exemples de code)

Nous pouvons voir trois sous-éléments dans l'élément de démonstration, div, p et span n'ont pas de styles CSS définis respectivement, mais tant que nous définissons un style unifié pour tous les éléments sous l'élément de démonstration, les trois sous-éléments div, p et span dans l'élément de démonstration aura des styles.

2. Sélecteur de classe (Tous les navigateurs prennent en charge les sélecteurs de classe, mais les sélecteurs multi-classes (.className1.className2) ne sont pas pris en charge par ie6.)

Le sélecteur de classe sélectionne en fonction du nom de la classe, précédé de ".", qui spécifie le style d'une manière indépendante de l'élément du document. Avant d'utiliser le sélecteur de classe, vous devez définir le nom de la classe sur l'élément html. vous devez vous assurer que le nom de la classe existe dans la balise html.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #2DC4CB;
			}

		</style>
	</head>
	<body>
		<div class="demo">类选择器</div>
	</body>
</html>

Copier après la connexion

Rendu :

Quest-ce quun sélecteur CSS ? 5 sélecteurs de base courants en CSS3 (exemples de code)

3. Sélecteur d'éléments (pris en charge par tous les navigateurs)
Sélecteur d'éléments (sélecteur de nom de balise) est le sélecteur le plus courant et le plus basique parmi les sélecteurs CSS3. Le sélecteur d'élément est en fait l'élément du document, tel que html, body, p, div, etc. Dans l'exemple suivant, l'élément span est sélectionné et la couleur de la police est définie sur rouge.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
			}
			span{
			    color: red;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>这里使用<span>元素选择器</span>改变了样式</p>
		</div>
	</body>
</html>

Copier après la connexion

Rendu :

Quest-ce quun sélecteur CSS ? 5 sélecteurs de base courants en CSS3 (exemples de code)

4. Sélecteur d'ID (pris en charge par tous les navigateurs)

Le sélecteur d'ID est très similaire au sélecteur de classe mentionné ci-dessus. Avant d'utiliser le sélecteur d'ID, vous devez également ajouter le nom de l'ID au document html, afin que l'élément correspondant puisse être trouvé dans le sélecteur de style. le sélecteur d'ID est la seule valeur dans une page. Lorsque nous utilisons la classe, nous ajoutons un signe "." (.className) avant le nom de la classe correspondante, tandis que le sélecteur d'ID utilise "#" avant le nom, par exemple (#). démo).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ID选择器</title>
		<style>
			#demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #FF0000;
			}

		</style>
	</head>
	<body>
		<div id="demo">ID选择器</div>
	</body>
</html>

Copier après la connexion

Rendu :

Quest-ce quun sélecteur CSS ? 5 sélecteurs de base courants en CSS3 (exemples de code)

Il y a plusieurs endroits où le sélecteur d'ID nécessite une attention particulière :

Premièrement : dans un document An Le sélecteur d'identifiant ne peut être utilisé qu'une seule fois, car l'identifiant est unique sur la page

Deuxièmement, les sélecteurs d'identifiant ne peuvent pas être combinés et utilisés comme des sélecteurs de classe, et un élément ne peut être nommé qu'avec un seul nom d'identifiant. ;

Troisièmement, vous pouvez utiliser le même nom d'identifiant dans différents documents. Par exemple, si vous définissez "#important" pour h1 dans "test.html", vous pouvez également le définir dans "test1.html". L'identifiant de p est "#important", mais le principe est qu'un seul identifiant appelé "#important" est autorisé dans test.html ou test1.html.

5. Sélecteur de groupe (pris en charge par tous les navigateurs)

Lorsque plusieurs éléments ont les mêmes attributs de style, ils peuvent appeler une instruction ensemble et utiliser des virgules séparées. Les sélecteurs de groupe regroupent les éléments de même style. Chaque sélecteur est séparé par une virgule ",". Cette virgule indique au navigateur que la règle contient plusieurs sélecteurs différents, alors la signification exprimée est complètement différente. la virgule devient le sélecteur de descendant dont nous avons parlé plus tôt. Vous devez y faire attention lorsque vous l'utilisez.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>群组选择器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #FF0000;
			}
			p,li{
			    color: blue;
			}
			.demo1,.demo2{
			 	color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>这里是一个段落!</p>
		    <ul><li>列表</li></ul>
		    <a href="#" class="demo1">链接一</a><br>
		    <span class="demo2">文字文字！</span>
		</div>
	</body>
</html>

Copier après la connexion

Rendu :

Quest-ce quun sélecteur CSS ? 5 sélecteurs de base courants en CSS3 (exemples de code)