css中的选择器优先级实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css中的选择器优先级</title>
</head>
<style type="text/css">
div {
background-color: #0b94ea;
}
.hzgg {
height: 200px;
width: 200px;
background-color: red;
}
#hzgg {
background-color: #1DC116;
}
</style>
<body>
<div class="hzgg" id="hzgg" style="background-color: #ff552e;">
<p>CSS选择器的优先级，内联样式 > ID选择器 > 类选择器 > 标签选择器</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
盒模型的简单案例，体会padding/border的简写实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型的简单案例，体会padding/border的简写</title>
</head>
<style type="text/css">
.box {
width: 300px;
height: 200px;
background-color: #0b94ea;
padding: 20px 30px 40px;
border: 10px solid yellow;
}
.box1 {
height: inherit;
background-color: #ff552e;
margin: 10px 6px;
border: 5px dotted lightgreen;
}
</style>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
