响应式布局@media写移动端适配时 ChromeF12开发者工具发现样式被划掉了

如题，需求需要将PC和Mobile放到一套代码里去实现，我选择了用响应式布局（即媒体查询技术）实现适配，但是在响应式布局@media写移动端适配时，ChromeF12开发者工具发现样式被划掉了？？？why？？？

经过仔细观察，发现是由于less的样式层级写的不够详细导致的，因为我们知道，css的样式名写的越详细，权重就越高