suchen

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

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

黄舟
黄舟Original
2016-12-29 14:17:131220Durchsuche

Im Folgenden wird der Kombinationsselektor vorgestellt
Der Kombinationsselektor bedeutet, dass dieselben Attribute zusammengestellt werden

Zum Beispiel 

<h1>标题</h1>
<h2>标题</h1>
<h3>标题</h1>
<h4>标题</h1>
<h5>标题</h1>

Ich möchte den Text davon 5 Arten von Titeln Alle werden rot, offensichtlich ist es zu mühsam, sie einzeln zu definieren
Wir können das tun



 

<h1>标题</h1>
<h2>标题</h1>
<h3>标题</h1>
<h4>标题</h1>
<h5>标题</h1>

Natürlich können wir auch die ID-Auswahl, die Klassenauswahl, und Label-Selektor zusammen

,a,#b,div{
color:red
}

Beachten Sie, dass sie durch Kommas getrennt werden müssen
Wenn nicht durch Kommas getrennt, handelt es sich um den Eltern-Kind-Selektor, über den wir weiter unten sprechen werden

<div id="a">
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<div>

Wenn Sie möchten, dass alle Hi-Tags im Div rot sind
, gibt es viele Möglichkeiten. Eine besteht darin, den Tag-Selektor zu verwenden, aber dadurch werden alle H1-Tags auf der Seite erstellt rot. Wenn nicht
können Sie auch Klassen-Tags verwenden, aber es ist mühsam, in jedem h1-Tag zu klassifizieren


Das ist in Ordnung


 

<div id="a">
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<div>

Wenn das der Fall ist


Das ist in Ordnung
<div id="a">
<a><h1>标题</h1></a>
<a><h1>标题</h1></a>
<div>


Es ist tatsächlich sehr einfach, dass die übergeordnete Auswahl jedes Label oder jede Klasse steuern kann oder ID-Selektor darunter, also ein Enkel oder Urenkel


 

<div id="a">
<a><h1>标题</h1></a>
<a><h1>标题</h1></a>
<div>
Das ist also auch möglich



Aber es wird empfohlen, dies nicht zu tun. Weil es leicht zu Verwirrung kommt, wenn die Ebenen nicht klar sind


 

<div id="a">
<a><h1>标题</h1></a>
<a><h1>标题</h1></a>
<div>


Ein weiterer Attributselektor, der nicht sehr häufig verwendet wird


Muss gelernt werden
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]{
color:red;
}
</style> <head>
<body>
<div id="a">
<a title="a"><h1>标题</h1></a>
<a title="b"><h1>标题</h1></a>
<div>
</body>
</html>


Dokumentationsbeschreibung ist nur nützlich
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Nur ​​gültig für einen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Attributselektor gilt für Formulare ohne Klasse oder ID. Er ist besonders nützlich beim Festlegen von Stilen:

Aber es wird nicht häufig verwendet. Sie können den Inhalt beherrschen, ohne die erforderliche Schulung zu absolvieren
input[type="text"]
{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } 
input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }


Das Folgende ist eine Einführung in benachbarte Selektoren
Das kann schwierig sein.



Dies ist eigentlich der Stil für das erste p. Das bedeutet, dass der äußere Rand 50 Pixel beträgt 
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;} </style> <head>
<body>
<h1>标题</h1>
<p>我离上面标题50px</p>
<p>不变</p>
<p>不变</p>
</body>
</html>
hat auch ein Unterelement.


Schauen wir uns zunächst das Folgende an:



Das ist der Eltern-Kind-Selektor . Ich habe gesagt, dass der Vater jedes der untergeordneten Elemente unten steuern kann.

Wenn ich möchte, dass a nur ein untergeordnetes Element von p und das andere a ein untergeordnetes Element von span ist, sollte dies der Fall sein der Fall sein 
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p a {color:red;} </style> <head>
<body>
<p>你<a>好</a>吗</p>
<p>你<span><a>好</a></span>吗</p>
</body>
</html>



Diese beiden Selektoren müssen hinzugefügt werden (natürlich ist es nicht der einzige), sonst ist es ungültig

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p>a {color:red;} </style> <head>
<body>
<p>你<a>好</a>吗</p>
<p>你<span><a>好</a></span>吗</p>
</body>
</html>

Diese beiden Selektoren sind sehr flexibel. Für Anfänger ist es besser, eine solide Grundlage für andere Selektoren zu legen 🎜>




Dies ist ein Bild vom W3C, ich schaue mir ein anderes Bild an

Ein neuer Anfang für das Design von div+css-Webseitenlayouts (3)Tatsächlich können Sie das Verstehen Sie es einfach, indem Sie es betrachten

Ein neuer Anfang für das Design von div+css-Webseitenlayouts (3) Das Obige ist der Inhalt eines Neuanfangs des div+css-Weblayout-Designs (3), mehr Für verwandte Inhalte achten Sie bitte darauf zur 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 neuer Anfang für das Design von div+css-Webseitenlayouts (2)Nächster Artikel：Ein neuer Anfang für das Design von div+css-Webseitenlayouts (2)

In Verbindung stehende Artikel

Mehr sehen