选择器

• CSS 选择器规定了 CSS 规则会被应用到哪些元素上。

通配符-选择器

• 结构：*

* {
	margin: 0;
	padding: 0;
}

标签-选择器

• 结构：标签名

<div></div>
<style>
	div {
		color: red;
	}
</style>

类-选择器

• 结构 .class

<div class="class1"></div>
<style>
	.class1 {
		color: red;
	}
</style>

ID-选择器

• 结构 #id

<div id="id1"></div>

<style>
	#id1 {
		color: red;
	}
</style>

选择器-后代

• 结构：{选择器1} {选择器2}
• 定义：选择 选择器1 下面的 所有选择器2 包含所有的后代

<div class="class1">
    <div class="class2">
        <div class="class2"></div>
    </div>
    <div class="class2"></div>
</div>
<style>
.class1 .class2{
    color:red
}
</style>

选择器-子代

• 结构：{选择器1} > {选择器2}
• 定义：选择 选择器1 下面的 子代选择器2 只选择子代

<div class="class1">
    <div class="class2">
        <div class="class2"></div>
    </div>
    <div class="class2"></div>
</div>
<style>
.class1 > .class2{
    color:red
}
</style>

选择器-并集

• 结构：{选择器1} , {选择器2}
• 定义：选择 选择器1 和 选择器2

<div class="class1"></div>
<div class="class2"></div>
<style>
.class1 , .class2{
    color:red
}
</style>

选择器-紧邻兄弟

• 结构：{选择器1} + {选择器2}
• 定义：选择 只选择和选择器1 挨着的 选择器2 （不包含选择器1）

<div class="class1 p"></div>
<div class="class2 p"></div>
<div class="class3 p"></div>
<style>
.p + .p{
    color:red
}
</style>