css - 在响应框架内从最后一个 child ( child )**连续**删除边框？

Question

换句话说，不只是父 div 中的最后一个子元素，而是一行中根据屏幕大小而变化的最后一个元素。我有 4 个元素(div)排成一排，除了最后一个元素(使用:last-child)外，每个元素都有一个右边框。但是，在小屏幕上，我的 4 行 div 变为 2 行 2 行，所以在这种情况下，我需要删除第二个 child 和最后一个 child 的右边框，即两行中每一行的最后一个 div。

它类似于这个问题 ( Remove border from last child css )，它是使用 :last-child 回答的，但我的案例有一个额外的复杂性，即从最后一个子项和第二个子项移除边框仅低于特定屏幕尺寸。

有没有一种方法可以使用 CSS 来做到这一点，而无需编写媒体查询来针对这个非常小、非常具体的案例(这看起来很糟糕)？也许我只是走错了......任何想法将不胜感激。我四处寻找解决方案，但找不到这种特定情况。

Answer 1

您应该能够通过几个媒体查询来做到这一点。

在您对平板电脑的媒体查询中，包括您当前的边框样式(取自@DarrenS 的 bootply):

@media screen and (min-width: 768px) {
    .col-sm-3 {
        border-right: 1px solid black;
    }
    .col-sm-3:last-child {
        border-right: 0px;
    }
}

在您的智能手机媒体查询中，使用 :nth-child(odd) 来获得您想要的效果:

@media screen and (max-width: 767px) {
    .col-xs-6:nth-child(odd) {
        border-right: 1px solid black;
    }
}