演示css中的选择器优先级(忽略js)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器优先级</title>
<style>
h1{
background-color: gold;
color: aqua;
}
.demo1{
background-color: darkorchid;
color: chartreuse;
}
#demo2{
background-color: lightseagreen;
color: coral;
}
</style>
</head>
<body>
<h1>标签h1的样式</h1>
<h1 class="demo1">标签h1和class两者比较</h1>
<h1 class="demo1" id="demo2">标签h1和class、id三者比较</h1>
<h1 class="demo1" id="demo2" style="background-color: peachpuff;color: red">标签h1和class、id、style四者比较</h1>
<p>通过以上对比发现，CSS选择器优先级对比结果为：style > id > class > 标签h1</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
盒模型
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box1{
width: 300px;
height: 500px;
background-color: chartreuse;
border: 5px solid orangered;
margin: 100px auto;
padding: 50px;
}
.box2{
width: 200px;
height: 300px;
background-color: darksalmon;
border: 5px solid royalblue;
}
/*盒子内套盒子 子盒子会自动继承父盒子的宽度,{windth: inherit}，这样设置后父盒子宽度改变，子盒子也会随着父盒子得改变而改变*/
.box3{
width: inherit;
height: 150px;
background-color: teal;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例