收藏
批改状态：未批改
老师批语：
写一个案例， 演示css中的选择器优先级(忽略js)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>坚持</title>
<style>
/*当我使用标签选择器，把标题设置成蓝色时，呈现的页面显示的是蓝色；*/
h1{
color: blue;
}
</style>
</head>
<body>
<h1 id="pig" class="zhu" title="zhu">我的兄弟叫二狗</h1>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>坚持</title>
<style>
/*当我使用标签选择器，把标题设置成蓝色时，呈现的页面显示的是蓝色；*/
h1{
color: blue;
}
/*当我同时用class样式选择器和标签选择器时，呈现的页面是class样式设置的颜色*/
.zhu{
color: red;
}
</style>
</head>
<body>
<h1 id="pig" class="zhu" title="zhu">我的兄弟叫二狗</h1>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>坚持</title>
<style>
/*当我使用标签选择器，把标题设置成蓝色时，呈现的页面显示的是蓝色；*/
h1{
color: blue;
}
/*当我同时用class样式选择器和标签选择器时，呈现的页面是class样式设置的颜色*/
.zhu{
color: red;
}
/*当我同时用id、class、标签选择器时，呈现的是id样式设置的颜色*/
#pig{
color: skyblue;
}
</style>
</head>
<body>
<h1 id="pig" class="zhu" title="zhu">我的兄弟叫二狗</h1>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>坚持</title>
<style>
/*当我使用标签选择器，把标题设置成蓝色时，呈现的页面显示的是蓝色；*/
h1{
color: blue;
}
/*当我同时用class样式选择器和标签选择器时，呈现的页面是class样式设置的颜色*/
.zhu{
color: red;
}
/*当我同时用id、class、标签选择器时，呈现的是id样式设置的颜色*/
#pig{
color: skyblue;
}
</style>
</head>
<body>
<!--当我同时用style属性标签、id、class、标签选择器时，呈现的是style标签设置的颜色-->
<h1 id="pig" class="zhu" title="zhu" style="color: black">我的兄弟叫二狗</h1>
</body>
</html>点击 "运行实例" 按钮查看在线实例
所以最后的优先级结论是：style>id>class>标签选择器
2. 写一个盒模型的简单案例，体会padding/border的简写规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放弃是犊子</title>
<style>
.kuang1{
/*这是设置宽度*/
width:600px;
/*这是设置高度*/
height: 400px;
/*这是设置背景颜色*/
background-color: blue;
/*这是设置内边距*/
padding: 100px;
/*这是设置外边距,按照顺时针旋转*/
margin:60px 50px 40px 30px;
/*这是设置边框线,可以设置宽度、颜色、样式等*/
border-top: black 20px solid;
border-right: black 20px solid;
border-bottom: black 20px solid;
border-left: black 20px solid;
}
.kuang2{
/*!*width会默认继承父级元素样式，height、background、border可以手动设置继承，padding、margin不支持被继承*!*/
height: inherit;
background-color: inherit;
border:inherit;
}
</style>
</head>
<body>
<div class="kuang1">
<div class="kuang2">
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
