Ein neuer Anfang für das Design von div+css-Webseitenlayouts (2)-CSS-Tutorial-php.cn

Ein neuer Anfang für das Design von div+css-Webseitenlayouts (2)

黄舟

Freigeben： 2016-12-29 14:13:23

Original

1371 Leute haben es durchsucht

Im Folgenden wird der Selektor in CSS vorgestellt
Was ist ein Selektor? Unten sehen Sie, dass

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

Nach dem Login kopieren

Das Div vor den geschweiften Klammern der HTML-Tag-Selektor ist, was bedeutet, dass alle Div-Tags in HTML diesen Stil übernehmen

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

Nach dem Login kopieren

Fügen Sie hier noch ein paar Divs hinzu und Sie werden feststellen, dass sie alle den gleichen Stil haben
Diese Art von Tag-Selektor kann nur effektiv sein, wenn es sich um ein HTML-Tag handelt

Der ID-Selektor wird unten vorgestellt

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

Nach dem Login kopieren

Diese Sache ist auf einen Blick leicht zu verstehen, fügen Sie einfach #

vor dem ID-Selektor und dann der Klasse hinzu Selektor

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

Nach dem Login kopieren

Sie können auch auf einen Blick verstehen, dass der Klassenselektor davor hinzugefügt wurde.

Lassen Sie uns über ihre Unterschiede sprechen
ID, Wie der Name schon sagt, handelt es sich um eine eindeutige Kennung, deren Priorität höher ist als die des Klassenselektors Hoch
und der Klassenselektor kann mehrere

verwenden

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

Nach dem Login kopieren

und

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

Nach dem Login kopieren

sind gleich

Außerdem ist der CSS-Stilblock dieser

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

Nach dem Login kopieren

Der Letztes kann das Semikolon weglassen, aber es ist besser,

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

Nach dem Login kopieren

hinzuzufügen

Da der ID-Selektor eine hohe Priorität hat, wird die Hintergrundfarbe des ID-Selektors
verwendet Prioritätsvergleich
ID-Selektor 》 Klassenselektor 》 Etikettenselektor

Aber der Klassenselektor Sie können mehrere Tags in einem Tag verwenden, was der ID-Selektor nicht kann

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

Nach dem Login kopieren

class="a b" Achten Sie auf Leerzeichen

Dies ist ein div

Dies ist ungültig

Was passiert, wenn das Inhalt der beiden Klassenselektoren Konflikte?

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

Nach dem Login kopieren

Beachten Sie, dass die Hintergrundfarbe unterschiedlich ist
Es wird die letzte im Stylesheet verwendet, d. h. wer auch immer hinter wem steht, wird diejenige verwenden, die Antwort ist grün
Es hat nichts mit dem Kontext dieser Klasse zu tun="a b"

Das Obige ist der Inhalt eines neuen Anfangs des div+css-Weblayoutdesigns (2). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php. cn)!