Un nouveau départ pour la conception de mise en page de pages Web div CSS (2)-tutoriel CSS-php.cn

Un nouveau départ pour la conception de mise en page de pages Web div CSS (2)

黄舟

Libérer： 2016-12-29 14:13:23

original

1358 Les gens l'ont consulté

Ce qui suit présente le sélecteur en CSS
Qu'est-ce qu'un sélecteur ? Regardez ci-dessous et vous comprendrez :

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
</body>
</html>

Copier après la connexion

Le div avant les accolades est le sélecteur de balise html, ce qui signifie que toutes les balises div en html adoptent ce style

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
<div></div>
<div></div>
<div></div>
</body>
</html>

Copier après la connexion

Ajoutez quelques divs supplémentaires ici et vous constaterez qu'ils sont tous du même style
Ce type de sélecteur de balise ne peut être efficace que s'il s'agit d'une balise html

Le sélecteur d'identifiant est présenté ci-dessous

<html>
<head>
<style type="text/css">
#a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> </head>
<body>
<div id="a">这是一个div</div>
</body>
</html>

Copier après la connexion

Cette chose est facile à comprendre en un coup d'œil, ajoutez simplement #

devant le sélecteur d'identifiant puis le sélecteur de classe

<html>
<head>
<style type="text/css">
.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div class="a">这是一个div</div>
</body>
</html>

Copier après la connexion

Vous pouvez également comprendre d'un coup d'œil que le sélecteur de classe est ajouté devant.

Parlons de leurs différences
L'ID, comme son nom l'indique, est un identifiant unique. Une étiquette ne peut être utilisée qu'une seule fois, et sa priorité est supérieure à celle du sélecteur de classe High
et le sélecteur de classe peut en utiliser plusieurs

<. 🎜>

<html>
<head>
<style type="text/css">
#a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div id="a">这是一个div</div>
<div id="a">这是一个div</div>
</body>
</html>

Copier après la connexion

<html>
<head>
<style type="text/css">
.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div class="a">这是一个div</div>
<div class="a">这是一个div</div>
</body>
</html>

Copier après la connexion

sont les mêmes

De plus, le bloc de style CSS est celui-ci

.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}

Copier après la connexion

Le dernier peut omettre le point-virgule, mais il est préférable d'ajouter

<html>
<head>
<style type="text/css">
#a{
background:red
}
.b{
border:solid 1px;
width:100px;
height:100px;
background:green;
}
</style> <head>
<body>
<div id="a" class="b">这是一个div</div>
</body>
</html>

Copier après la connexion

Le sélecteur d'identifiant ayant une priorité élevée, il utilisera la couleur de fond du sélecteur d'identifiant

Comparaison des priorités
sélecteur d'identifiant 》 sélecteur de classe 》 sélecteur d'étiquette

Mais le sélecteur de classe Vous pouvez utiliser plusieurs balises dans une seule balise, ce que le sélecteur d'identifiant ne peut pas faire

<html>
<head>
<style type="text/css">
.a{
width:100px;
height:100px;
}
.b{
border:solid 1px;
background:red;
}
</style> <head>
<body>
<div class="a b" >这是一个div</div>
</body>
</html>

Copier après la connexion

class="a b" Faites attention aux espaces

Ceci est un div

Ceci n'est pas valide

Quoi si le contenu des deux sélecteurs de classe est en conflit ?

<html>
<head>
<style type="text/css">
.a{
width:100px;
height:100px;
border:solid 1px;
background:red;
}
.b{
width:100px;
height:100px;
border:solid 1px;
background:green;
}
</style> <head>
<body>
<div class="a b" >这是一个div</div>
</body>
</html>

Copier après la connexion

Notez que la couleur de fond est différente

Il utilisera la dernière dans la feuille de style, c'est-à-dire celui qui est derrière qui utilisera celle-là, la réponse est vert
Cela n'a rien à voir avec le contexte de cette classe="a b"

Ce qui précède est le contenu du nouveau début de la conception de mises en page Web div css (2 Pour en savoir plus). contenu associé, veuillez faire attention au site Web PHP chinois (www.php.cn ) !