Question

我在无序列表中有5个列表项。

<ul class="menu">
   <li>First item</li>
   <li>Second item</li>
   <li>THird item</li>
   <li>Fourth item</li>
   <li>Fifth item</li>
</ul>
<ul class="dd-menu">
   <li>First item</li>
   <li>Second item</li>
   <li>THird item</li>
   <li>Fourth item</li>
   <li>Fifth item</li>
<ul>

现在我要隐藏menu中的最后一项和dd-menu中的第一项

这是我的媒体查询

@media screen and (max-width: 479px) {
    ul.menu li:nth-child(n+2){
        display: none;
    }
    ul.dd-menu li:nth-child(-n+1){
        display: none;
    }    
}
@media screen and (max-width: 767px) {
    ul.menu li:nth-child(n+3){
        display: none;
    }
    ul.dd-menu li:nth-child(-n+2){
        display: none;
    }    
}
@media screen and (max-width: 990px) {
    ul.menu li:nth-child(n+4){
        display: none;
    }
    ul.dd-menu li:nth-child(-n+3){
        display: none;
    }    
}
@media screen and (min-width: 991px) {
    ul.menu li:nth-child(n+5){
        display: none;
    }
    ul.dd-menu li:nth-child(-n+4){
        display: none;
    }    
}

但在移动设备中，我可以看到ul.menu中的第一项，而ul.dd-menu中的最后一项

Answer 1

现在可以使用

@media screen and (min-width: 0px) and (max-width: 479px) {
    ul.menu li:nth-child(n+2){
        display: none;
    }
    ul.dd-menu li:nth-child(-n+1){
        display: none;
    }    
}
@media screen and (min-width: 480px) and (max-width: 767px) {
    ul.menu li:nth-child(n+3){
        display: none;
    }
    ul.dd-menu li:nth-child(-n+2){
        display: none;
    }    
}
@media screen and (min-width: 768px) and (max-width: 990px) {
    ul.menu li:nth-child(n+4){
        display: none;
    }
    ul.dd-menu li:nth-child(-n+3){
        display: none;
    }    
}
@media screen and (min-width: 991px) {
    ul.menu li:nth-child(n+5){
        display: none;
    }
    ul.dd-menu li:nth-child(-n+4){
        display: none;
    }    
}

这是小提琴链接：https://jsfiddle.net/4m5dL9g3/1/

设备方面的css媒体查询无法正常工作

1 个答案: