选择器

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="{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>