CSS 分组 和 嵌套 选择器
CSS 分组 和 嵌套 选择器
所谓分组选择器就是当多个选择器对应的元素需要相同的样式时可以将多个选择器以逗号分隔放在一条样式声明的前面达到多个选择器多条样式声明相同的效果.
所谓嵌套选择器就是实现对选择器内部的选择器对应的元素实现样式的设置.css
在样式表中有很多具有相同样式的元素。
h1{color:green;}
h2{color:green;}
p{color:green;}为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔.
在下面的例子中，我们对以上代码使用分组选择器：
h1,h2,p{color:green;}嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式：
为所有p元素指定一个样式
为所有class=”marked”的元素指定一个样式
为所有class=”marked”元素内的p元素指定一个样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{
color:blue; text-align:center;}
.marked{ background-color:red;}
.marked p{ color:white;}
</style>
</head>
<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
</body>
</html>
neue Datei
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{
color:blue; text-align:center;}
.marked{ background-color:red;}
.marked p{ color:white;}
</style>
</head>
<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
</body>
</html>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)