CSS选择器及其优先级

• id选择器：

<style>
#first{
    color:red;
}
</style>
<div id="first">content</div>

---

• class选择器：

<style>
.first{
    color:red;
}
</style>
<div class="first second">content</div>

---

• 标签选择器：

<style>
div{
    color:red;
}
</style>
<div class="first second">content</div>

---

• 通配符选择器：选取所有标签

<style>
*{
    color:red;
}
</style>
<div class="first second">content</div>

---

优先级：!important > 行间样式 > id > class|属性 >  标签选择器 > 通配符

CSS权重：（256进制的数字）:

!important	Infinity
行间样式	1000
id	100
class|属性|伪类	10
标签|伪元素	1
通配符	0

 

父子选择器：

<style>
div span{
    color:red;
}
</style>
<div class="first second">
<span>111</span>
</div>

直接子元素选择器：

<style>
div > span{
    color:red;
}
</style>
<div class="first second">
<span>这里字体变红</span>
<p><span>这里字体不变色</span></p>
</div>

并列选择器：

<style>
div.demo{
    color:red;
}
</style>
<div>1</div>
<div class="demo">这里变色</div>
<p class="demo">1</p>