css - 在桌面和移动设备上间隔多个形容词选择器

Question

我有 2 个或更多<a>标签，我正在努力确保它们margin-right在桌面视图和margin-top移动视图上都有。我可以找出基本 CSS 中的媒体查询部分。

我很确定这a + a + a不会起作用，但如果会，它会变得混乱，尤其是在我连续有 5 个链接的情况下。

我不能总是使用 flex，所以这可能不是一个选择。

在这种情况下，正确的方法是什么？

标签： css

Answer 1

您可以使用以下代码：

@media screen and (min-width:800px) {
    a{margin-right:20px;}
    a:last-of-type{margin-right:0px}
}
@media screen and (max-width:799px) {
    a{margin-top:20px;}
    a:first-of-type{margin-top:0px}
}

媒体查询和保证金，您可以根据您的要求进行更改。