根据媒体查询设置每个链接（许多）的样式

Question

我在页面上有许多链接作为列表的一部分。

我想根据媒体查询为每个链接设置不同的背景位置。

到目前为止我的收获

a.firstLink
{
 @media (min-width: 768px) and (max-width: 979px)
 {
   background-position:0px 0px;
 }
}
a.secondLink
{
 @media (min-width: 768px) and (max-width: 979px)
 {
   background-position:0px -100px;
 }
}

这很好，并且有效，但这意味着我必须执行与链接一样多的媒体查询，而且有很多。将其乘以我希望每个链接执行的媒体查询数量 (3)，它会变成一些丑陋的 CSS。

Answer 1

这个解决方案如何？

   @media (min-width: 768px) and (max-width: 979px) {

    a.firstLink {
       background-position:0px 0px;
     }

    a.secondLink {
       background-position:0px -100px;
     }

    }

效果好吗？

第二种解决方案：

   @media (min-width: 320px) and (max-width: 599px),
   (min-width: 600px) and (max-width: 767px),
   (min-width: 768px) and (max-width: 979px) {

    a.firstLink {
       background-position:0px 0px;
     }

    a.secondLink {
       background-position:0px -100px;
     }

    }

这样好吗？