Heim > Artikel > Web-Frontend > Ein neuer Anfang für das Design von div+css-Webseitenlayouts (2)

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

黄舟Original: 2016-12-29 14:13:231318Durchsuche

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>

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>

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>

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>

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>

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>

sind gleich

Außerdem ist der CSS-Stilblock dieser

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

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>

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>

class="a b" Achten Sie auf Leerzeichen
beaea4a1fbab5f47be0f6cdd20f8fd6bDies ist ein div16b28748ea4df4d9c2150843fecfba68 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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ein Neuanfang für das Design von div+css-Webseitenlayouts (1)Nächster Artikel：Ein Neuanfang für das Design von div+css-Webseitenlayouts (1)

In Verbindung stehende Artikel

Mehr sehen