CSS-Nachkommenselektoren sind: 1. „Übergeordnetes Element * {}“, alle Nachkommenelemente des übergeordneten Elements finden. 2. „Parent Children {}“ dient dazu, das angegebene untergeordnete Element vom übergeordneten Element zu finden. 3. „Parent Child 1 Child 2 {}“ dient dazu, das untergeordnete Element 1 vom übergeordneten Element zu finden und dann von der untergeordneten Generation 1 Nachkommen zu finden 2.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Der Nachkommenselektor wird auch als enthaltender Selektor bezeichnet.
Der Nachkommenselektor kann Elemente auswählen, die Nachkommen eines Elements sind.
Konzentrierte Form des Nachkommenselektors:
1 Parent* {} Alle Nachkommen des übergeordneten Elements finden. 父代 * {}从 父代 中的找到 所有子代。
2、父代 子代1{} 是从 父代 中找到 子代1 或者 父代 子代2{} 是从 父代 中找到 子代2 。
3、父代 子代1 子代2{}
Parent Child 1{} soll Kind 1 vom Elternteil finden oder Parent Child 2{} soll das Kind vom Elternteil 2 finden. 3. Parent Child 1 Child 2{} Dies dient dazu, Child 1 von Parent und dann Child 2 von Child 1 zu finden.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
padding: 20px;
background: rgba(255,0,0,0.2); //这是给它一个红色，透明度为0.2
}
.a *{
border: 2px solid black; //这里是选中类a的所有后代
}
</style>
</head>
<body>
<div class="a">a
<div class="b">b
<div class="c">c</div>
</div>
</div>
</body>
</html>Zweite Form:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
padding: 20px;
background: rgba(255,0,0,0.2);
}
.a .b{
border: 2px solid black; //同理这里选择 .c 也是可以的因为他们都是 .a 的后代。
}
</style>
</head>
<body>
<div class="a">a
<div class="b">b
<div class="c">c</div>
</div>
</div>
</body>
</html>Dritte Form: .b und .c können nicht gleichzeitig ausgewählt werden, sondern nur .c.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
padding: 20px;
background: rgba(255,0,0,0.2);
}
.a .b .c{
border: 2px solid black;
}
</style>
</head>
<body>
<div class="a">a
<div class="b">b
<div class="c">c</div>
</div>
</div>
</body>
</html>
Im folgenden Code muss noch ein weiterer Punkt beachtet werden: In einem p ist ein p mit dem Klassennamen c verschachtelt, und zu diesem Zeitpunkt ist auch ein p mit dem Klassennamen c verschachtelt ausgewählt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
padding: 20px;
background: rgba(255,0,0,0.2);
}
.a .b .c{
border: 2px solid black;
}
</style>
</head>
<body>
<div class="a">a
<div class="b">b
<div class="c">c
<div>
<div class="c">span</div>
</div>
</div>
</div>
</div>
</body>
</html>Das obige ist der detaillierte Inhalt vonWas sind die CSS-Nachkommenselektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
