淘先锋技术网

首页 1 2 3 4 5 6 7

CSS媒体查询中的选择器不会影响所有页面元素

在下面的代码中，我将正文的边距设置为10px(所有边距)。我所期望的是，当我们输入小于600px的分辨率(媒体查询)时，然后是*选择器，它有边距:0px= >将影响所有元素(包括正文),但它没有发生，边距仍然存在。为什么*选择器不会影响这个代码示例中的所有元素？。

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
    margin:10px;
    padding:0px;
    background-color: #BDDFF9;
}
header {
    width:300px;
    background-color:blue;
    margin:0px;
    padding:0px;
}

@media screen and (max-width: 600px) {
  * {
    margin:0px; 
    padding:0px;
  }

  body {
    background-color:#D2D2D2;
  }

}
</style>
</head>
<body>
<header>
    Text
</header>
</body>
</html>

这是因为*是最不具体的CSS选择器，并且被所有其他选择器覆盖。您必须对单个选择器应用样式

body {
  margin: 10px;
  padding: 0px;
  background-color: #BDDFF9;
}

header {
  width: 300px;
  background-color: blue;
  margin: 0px;
  padding: 0px;
}

@media screen and (max-width: 600px) {  
  body {
    margin: 0px;
    background-color: #D2D2D2;
  }
}

<header>
  Text
</header>