@media放在css样式前面不生效的问题

在使用css3的@media查询对网页的某个元素进行移动端适配时发现设置的样式没有生效，看了一下@media的查询条件也没有错，那是怎么回事呢，后来仔细看了一下，发现@media写在了那个元素原有的css样式前面，想着会不会是因为这样的顺序导致了@media里面设置的样式被后面原有的css样式覆盖了，于是把它们的位置调换了一下，果然@media的样式就可以生效了。

比如原来的写法是：

/* 适应移动端网页尺寸-媒体查询 */
@media screen and (max-width: 600px) {
  .divarticlebody{
    width: 100%;
   }
}

.divarticlebody{
    width: 1240px;
}

要改成下面的写法：

.divarticlebody{
    width: 1240px;
}

/* 适应移动端网页尺寸-媒体查询 */
@media screen and (max-width: 600px) {
  .divarticlebody{
    width: 100%;
   }
}