色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

CSS媒體查詢中的選擇器不會影響所有頁面元素

CSS
林國瑞1年前9瀏覽0評論

在下面的代碼中，我將正文的邊距設(shè)置為10px(所有邊距)。我所期望的是，當(dāng)我們輸入小于600px的分辨率(媒體查詢)時，然后是*選擇器，它有邊距:0px= >將影響所有元素(包括正文),但它沒有發(fā)生，邊距仍然存在。為什么*選擇器不會影響這個代碼示例中的所有元素？。

<!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選擇器，并且被所有其他選擇器覆蓋。您必須對單個選擇器應(yīng)用樣式

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>