为什么选择者不会工作，修​​改被忽略并且在@media

Question

我对媒体查询有一些问题，这是我写的

@media only screen and (max-width: 500px){

    #points_nav li{
        width: 1rem;
        height: 1rem;
    }
}

然后我添加了这个

<meta name="viewport" content="width=device-width, initial-scale=1.0">

和原来的css

#points_nav li{
width: 2rem;
height: 2rem; 
cursor: pointer;
margin: 0 1rem;


position: relative;

}

我做了一些研究，我做了人们在论坛上所说的一切！但我仍然不明白为什么它不起作用，它是同一个选择器所以它应该改变财产，但它仍然是删除。和修改不适用。

w̶i̶d̶t̶h̶:̶ ̶1̶r̶e̶m̶;̶
h̶e̶i̶g̶h̶t̶:̶ ̶1̶r̶e̶m̶;̶

但是当我添加更多精度时，如

#container_div #points_nav li{
        width: 1rem;
        height: 1rem;
    }

它有效。 我不知道为什么，但它实际上似乎是随机的，有时它不会（我可能会错）。谢谢你的帮助！

Answer 1

如果你真的是按照这个顺序写的，原因很清楚：

@media only screen and (max-width: 500px){

    #points_nav li{
        width: 1rem;
        height: 1rem;
    }
}

#points_nav li{
  width: 2rem;
  height: 2rem; 
  cursor: pointer;
  margin: 0 1rem;
  position: relative;
}

此处，常规CSS规则会覆盖媒体查询的宽度设置。它们都具有相同的选择器，因此第二个规则中的设置将覆盖第一个规则中的设置。为避免这种情况，您可以撤销订单。

如果您在上面的媒体查询中以此开头

#container_div #points_nav li{
    width: 1rem;
    height: 1rem;
}

...然后添加

#points_nav li{
  width: 2rem;
  height: 2rem; 
  cursor: pointer;
  margin: 0 1rem;
  position: relative;
}

...，它不会被覆盖，因为选择器#container_div #points_nav li的特征高于#points_nav li。要覆盖CSS规则，以下规则至少需要具有相同的规范。