Heim >Web-Frontend >CSS-Tutorial >CSS-Kontextauswahl
CSS-Kontextauswahl
- 无忌哥哥Original
- 2018-06-28 17:19:022506Durchsuche
Familie: Vorfahren, Väter, Brüder und Gleichaltrige
1. Vorfahrenelemente: Elemente einschließlich mehrstufiger Nachkommen
2. Elternelemente: Elemente, die nur untergeordnete Elemente der ersten Ebene enthalten;
3. Angrenzende Elemente: Elemente mit demselben übergeordneten Element;
1. Nachkommen-Selektor: Suchen Sie zuerst das Vorgängerelement und wählen Sie dann alle angegebenen Nachkommenelemente darunter aus
Syntax : Verwenden Sie Leerzeichen, um Vorfahren und Ziele zu trennen. Es können mehrere Leerzeichen zum Trennen verwendet werden.
Format: Ancestor target {declaration}
2. Unterselektor: Suchen Sie zuerst das übergeordnete Element , und wählen Sie dann alle direkt darunter liegenden Elemente aus
Syntax: Übergeordnetes Element {style-Anweisung🎜>
3. Bestimmen Sie zunächst die benachbarten Elemente. Wählen Sie zunächst alle nachfolgenden angegebenen Elemente aus<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style type="text/css">
.art p {
/*color:red;*/
}
.art > p {
/*color: green;*/
}
.art h1+p {
/*只会将h1后面紧邻的p变色*/
/*color:blue; */
}
.art p+p {
clor: red;
}
</style>
</head>
<body>
<article>
<h1>php中文网</h1>
<p>永久免费的在线教学网站</p>
<p>将公益进行到底</p>
<p>为了情怀,为了梦想,为了更多像我这样的PHP爱好者</p>
<section>
<h2>如何学习前端</h2>
<p>一定要多动手多写笔记进行总结</p>
</section>
<section>
<h2>原来大家是这样学习的呀~~</h2>
</section>
</article>
<hr>
<ul>
<li>1列表项</li>
<li>2列表项</li>
<li>3列表项</li>
<li>4列表项</li>
<li>5列表项</li>
</ul>
</body>
</html>Das obige ist der detaillierte Inhalt vonCSS-Kontextauswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!