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

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

黄舟original: 2016-12-29 14:13:231315parcourir

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>

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>

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>

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>

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>

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

sont les mêmes

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

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

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>

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>

class="a b" Faites attention aux espaces

beaea4a1fbab5f47be0f6cdd20f8fd6bCeci est un div16b28748ea4df4d9c2150843fecfba68 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>

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

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：Un nouveau départ pour la conception de mises en page de pages Web div CSS (1)Article suivant：Un nouveau départ pour la conception de mises en page de pages Web div CSS (1)

Articles Liés

Voir plus