* Селектор внутри CSS Медиа-запрос не влияет на все элементы страницы - PullRequest
Новая
       0

* Селектор внутри CSS Медиа-запрос не влияет на все элементы страницы

0 голосов
/ 14 марта 2020

В следующем коде я установил поле для тела равным 10 пикселей (все поля). Я ожидал, что когда мы введем разрешение менее 600 пикселей (медиа-запрос), тогда селектор * будет иметь поле: 0 пикселей; => повлияет на все элементы (включая тело), ​​но этого не произошло, и поле остается. почему селектор * не влияет на все элементы в этом примере кода?. 

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

1 Ответ

4 голосов
/ 14 марта 2020

Это потому, что * является наименее определенным селектором c 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>

Причина, по которой * не сработал, состоит в том, что к body добавлены правила, которые более специфичны c, чем *. Не рекомендуется использовать * для переопределения стилей. Вот хорошая MDN статья.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...