今天在维护代码的时候,突然发现一个有趣的东西,百度了一下果然:
媒体查询并不会改变选择器的优先级
遵循CSS规则,同样的选择器里面同样的规则,写在后面覆盖前面的。
可以举个很简单的"栗子":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
color: green;
}
@media (max-width: 1200px) {
div {
color: red;
}
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>
这是正常情况,但是如果将媒体查询和标签选择器调换位置,那么文字颜色就会一直是绿色。