当css媒体查询只允许添加新样式而不是旧版本修改时，会出现什么问题

Question

  .livesearch{
  width: 228px;
  position: relative;
  margin-top: -8px;
  margin-right: 72px;
  margin-left: auto;
  }
  
 @media only screen and (max-width: 600px) {
 	.livesearch{
  width: 100%;
	position: fixed;
  margin-top: 0;
  margin-right: 0;
  background-color: #EEE;
	}
 }

它接受背景颜色：#EEE;只有（在我的页面中）更多，在同一媒体查询中还有其他类，我在这里删除了以进行简化，并且样式添加和修改都适用于它们。这个问题只存在于我在这里写的问题

Answer 1

检查一下：

您可以在整页调整大小上看到差异

body {
  background-color: white;
}

.livesearch {
  width: 228px;
  position: relative;
  margin-top: -8px;
  margin-right: 72px;
  margin-left: auto;
}

@media only screen and (max-width: 600px) {
  .livesearch {
    width: 100%;
    position: fixed;
    margin-top: 0;
    margin-right: 0;
    background-color: yellow;
  }
}

<div class="livesearch">Test</div>