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

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

黄舟

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

Original

1206 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Wenn das der Fall ist

Das ist in Ordnung

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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


 


标题
标题

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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 (m.sbmmt.com)!