!important > 内联样式(行内样式)>id选择器 > class(类)选择器 > 标签选择器 > 通配符* (全局选择器)> 继承(子类元素继承父类的样式例如:div p)
内联样式表的权值为 1000
id 选择器的权值为 0100
class 类选择器的权值为 0010
标签选择器的权值为 0001
/*css*/
*{
margin:0;
padding: 0;
}
#box { // ID选择器
height: 300px;
}
.box { // 类选择器
width: 200px !important; //!important
height: 200px;
padding: 20px;
margin: 20px;
border: 5px solid red;
background-color: skyblue;
box-sizing: content-box;
}
div{ // 标签选择器
margin: 10px;
}
div p{ // 继承选择器
}
/*html*/
<div class="box" id="box" style="border: 2px solid yellow;">
<p><p>
</div> <!-- style:行内样式 -->
css选择器有哪些?
https://www.w3school.com.cn/cssref/css_selectors.asp