一、CSS的选择器优先级
收藏
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器和优先级</title>
<style>
/* 标签选择器 */
h1 {
background-color: #87CEEB;
color: #FF0000;
}
/* class类选择器 用的是 . 开头。优先级大于标签选择器 */
.bg-blue {
background-color: #F5DEB3;
}
/* id选择器 ，用#开头命名。 优先级大于class选择器 */
#bg-yellow {
background-color: yellow;
}
</style>
</head>
<body>
<h1>我是H1体验-标签</h1>
<h1 class="bg-blue">我是H1体验classs</h1>
<h1 class="bg-blue" id="bg-yellow">我是H1体验id</h1>
<h1 class="bg-blue" id="bg-yellow" style="background-color: green;">我是H1体验-元素属性style</h1>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二、盒子模型，体会padding/border简写规则
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: green;
}
.box2 {
height:inherit;
background-color: yellow;
padding 50px solid green;
border:50px solid red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div align=center>我是小盒子</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
