<!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>
