我在无序列表中有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
中的最后一项
答案 0 :(得分:0)
现在可以使用
@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/