<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="25样式优先级.css">
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box" style="width: 200px;height: 200px;background-color: purple;"></div>
<!--<div class="box"></div>-->
<!--
样式的分类
内嵌样式 写在style标签中的样式
行内样式 写在标签中的样式
外链样式 写在css文件中的样式
样式的优先级
行内样式 > 内嵌样式
行内样式 > 外链样式
内嵌样式 > 外链样式 代码是从上到下解析的
总结:离标签最近的样式生效,写了!important就是显示谁
filter:drop-shadow(10px 10px 10px black);不支持第四个值
box-shadow:10px 10px 10px 0px black;
滤镜是给整个框一个阴影 比如用:after写了一个小三角和长方形拼一起
阴影是只给了框框一个阴影
-->
</body>
</html>