!important（正无穷）>行内（1000）>id选择器（100）>class选择器（10）>标签选择器（1）>通配选择器（0）
同一个花括号设置相同的样式，以最后的为准，前边的会被覆盖，样式冲突时需要考虑权重
案例：
<body>
<ul id="list" class="list">
<li class="item" id="item1">我问问</li>
<li class="item" id="item2">鹅鹅鹅</li>
<li class="item" id="item3">热热热</li>
</ul>
<br>
<ul id="list1" class="list1" style="background-color: rgb(170, 0, 255);">
<li class="item" id="item4" style="background-color: rgb(58, 4, 34);">111</li>
<li class="item" id="item5" style="background-color: rgb(58, 4, 34);">222</li>
<li class="item" id="item6">
<span class="liem">333</span>
</li>
</ul>
</body>
class选择器>标签选择器
<style>
#list>li{
background-color: darkgreen;
}
#list>.item{
background-color: rgb(11, 240, 11);
}
id选择器>class选择器
#list{
background-color: cadetblue;
}
.list{
background-color: chocolate;
}
行内>id选择器
#list1{
background-color: rgb(105, 85, 116);
}
!important>行内
#item4{
background-color: rgb(255, 9, 161)!important;
}
id选择器（100)+class选择器（10）> id选择器（100)
#item6>.liem{
background-color: goldenrod;
}
em：1em=自身的字体大小
body{
font-size: 10px;
}
#list>.item{
font-size: 2em;
}
rem：1rem=根元素的字体大小（html：根元素）
#list>#item1{
font-size: 2rem;
}
</style>
