Heim > Artikel > Web-Frontend > CSS-Kontextauswahl

CSS-Kontextauswahl

无忌哥哥Original: 2018-06-28 17:19:022406Durchsuche

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!

css 选择器

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：CSS-PseudoklassenselektorNächster Artikel：CSS-Pseudoklassenselektor

In Verbindung stehende Artikel

Mehr sehen