根据宽度继续删除<ul>的最后一个孩子？

Question

我有这个布局，我想继续删除列表的最后一个子项（缩小），分辨率越低。代码正是我的实现：

＆＃13;

＆＃13;

p > span {
  font-weight: bold;
}

.layout1 {
  width: 1170px;
  list-style: none;
  background: gray;
  position: relative;
}

.layout1 > li {
  display: inline-block;
  vertical-align: top;
  width: 24%;
  margin-right: 1%;
  height: 100px;
  background: #dbca7f;
}

.layout1 > li:last-child {
  margin-right: 0;
}

/* 
/* This is what I'd like to do for about 3 times, keep cutting, ignore the (-justToMakeItNotWork, the code would otherwise work without it. */

@media screen and (max-width: 990px) {
  .layout1(-justToMakeItNotWork) > li:last-child {
    display: none;
  }
}

/* And again */

@media screen and (max-width: 768px) {
  .layout1(-justToMakeItNotWork) > li:last-child {
    display: none;
  }
}

/* And again, probably */
  

＆＃13;

<!-- There are other bootstrap classes added, but only col-XX-NN, irrelevant to the issue. -->
<p> This is the full view </p>
<ul class="layout1 col-md-12">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
</ul>

<p> Let's assume that we're now unde 768px, <span> I'd like to now cut the number of posts show to 3</span>, like this: </p>

<ul class="layout1 col-md-12">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
</ul>

<p> That would work fine with just a rule, okay, but now let's say my screen got down-graded to ~468px. <span>I'd like to do it again and cut my posts to just 2: </span></p>

<ul class="layout1 col-md-12">
  <li class="post col-md-3">
  <li class="post col-md-3">
</ul>

＆＃13;

＆＃13;

＆＃13;

在完整视图中转换为：

我想在较低的屏幕上实现这样的目标：

＆lt; 2柱/帖子＆lt;分别为468像素。

价值表：

1170px - 4 columns.
990px - 4 columns.
768px - 3 columns.
468px - 2 columns.

很遗憾，在删除第一个@media-queries后添加last-child以继续删除最后一个孩子并不起作用。我该如何解决这个问题？

此外，我无法添加规则来删除最后的2个孩子，因为较高分辨率的规则已经减少了1个帖子，因此，我只剩下一个帖子。

Answer 1

您可以使用与nth-child

类似的方式使用nth-last-child

@media screen and (max-width: 990px) {
  .layout1 > li:nth-last-child(1) {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .layout1 > li:nth-last-child(2) {
    display: none;
  }
}

＆＃13;

＆＃13;

p > span {
  font-weight: bold;
}

.layout1 {
  list-style: none;
  background: gray;
  position: relative;
}

.layout1 > li {
  display: inline-block;
  vertical-align: top;
  width: 24%;
  margin-right: 1%;
  height: 100px;
  background: #dbca7f;
}

.layout1 > li:last-child {
  margin-right: 0;
}

/* 
/* This is what I'd like to do for about 3 times, keep cutting, ignore the (-justToMakeItNotWork, the code would otherwise work without it. */

@media screen and (max-width: 990px) {
  .layout1 > li:nth-last-child(1) {
    display: none;
  }
}

/* And again */

@media screen and (max-width: 768px) {
  .layout1 > li:nth-last-child(2) {
    display: none;
  }
}

/* And again, probably */

＆＃13;

<!-- There are other bootstrap classes added, but only col-XX-NN, irrelevant to the issue. -->
<p> This is the full view </p>
<ul class="layout1 col-md-12">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用:nth-last-child(-n+2)来获取最后两个孩子：

@media screen and (max-width: 768px) {
  .layout1(-justToMakeItNotWork) > li:nth-last-child(-n+2) {
    display: none;
  }
}

Answer 3

您可以使用:nth-child(n+x)来定位元素。喜欢＆＃34;选择除前x个元素之外的所有元素＆＃34;。

@media screen and (max-width: 768px) {
  .layout1 > li:nth-child(n+3) {
    display: none;
  }
}

@media screen and (max-width: 468px) {
  .layout1 > li:nth-child(n+2) {
    display: none;
  }
}