如何选择包含列表项的行

时间：2017-06-19 17:45:39

标签： javascript jquery css css3 flexbox

我有以下布局和无序列表：

https://codepen.io/barkins/pen/qjrpKJ 

ul{
  max-width:1200px;
  list-style:none;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-wrap:wrap;
}
li{
  width:12%;
  @media (max-width:720px){
    width:16%;
  }
  @media (max-width:480px){
    width:22%;
  }
}

我只需选择偶数行，无论媒体查询断点如何，只在第二行添加边框。

.second-row-items{
  border:1px solid red;
}

这可能与CSS和JavaScript（jQuery）有关吗？

我尝试使用以下CSS规则来手动选择第二行，但最好还是以某种方式使用JavaScript自动完成，并理想地选择所有其他偶数行。

&:nth-child(n+9):nth-child(-n+16){
     border:1px solid red; 
  }

5 个答案:

答案 0 :(得分：1)

如果你只想选择第二行，那应该可以胜任：

@media (max-width:480px)
{
  li:nth-child(5),
  li:nth-child(6),
  li:nth-child(7),
  li:nth-child(8)
  {
    background-color: red;
  }
}
@media (min-width:481px) and (max-width:720px)
{
  li:nth-child(7),
  li:nth-child(8),
  li:nth-child(9),
  li:nth-child(10),
  li:nth-child(11),
  li:nth-child(12)
  {
    background-color: red;
  }
}
@media (min-width:721px)
{
  li:nth-child(9),
  li:nth-child(10),
  li:nth-child(11),
  li:nth-child(12),
  li:nth-child(13),
  li:nth-child(14),
  li:nth-child(15),
  li:nth-child(16)
  {
    background-color: red;
  }  
}

如果你想要所有偶数行，那么使用：

@media (max-width:480px)
{
  li:nth-child(8n-3),
  li:nth-child(8n-2),
  li:nth-child(8n-1),
  li:nth-child(8n)
  {
    background-color: red;
  }
}
@media (min-width:481px) and (max-width:720px)
{
  li:nth-child(12n-5),
  li:nth-child(12n-4),
  li:nth-child(12n-3),
  li:nth-child(12n-2),
  li:nth-child(12n-1),
  li:nth-child(12n)
  {
    background-color: red;
  }
}
@media (min-width:721px)
{
  li:nth-child(16n-7),
  li:nth-child(16n-6),
  li:nth-child(16n-5),
  li:nth-child(16n-4),
  li:nth-child(16n-3),
  li:nth-child(16n-2),
  li:nth-child(16n-1),
  li:nth-child(16n),
  {
    background-color: red;
  }  
}

答案 1 :(得分：0)

仅使用CSS（断点特定）

选择第二行中的元素

无论媒体查询断点如何，都无法选择第二行中的元素，因此您必须为每个断点创建该行中元素的选择器。

您可以使用两个:nth-child pseudo-classes来选择一系列元素。例如：

li:nth-child(n + 7):nth-child(-n + 12)

将选择元素7添加到12，两者都包括在内。也就是说，如果您有6列，则为第二行。

img {
  max-width:100%;
  height:auto;
}

ul {
  max-width:1200px;
  list-style:none;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-wrap:wrap;
}

li {
  width:12%;
  font-size: 0;
}

@media (min-width: 721px) { 
  li:nth-child(n+9):nth-child(-n+16) {
    margin: 4px 0;
    padding: 16px 0;
    background: cyan;
  }
}

@media (max-width: 720px) {
  li {
    width: 16%;
  }
  
  li:nth-child(n+7):nth-child(-n+12) {
    margin: 4px 0;
    padding: 16px 0;
    background: red;
  }
}

@media (max-width: 480px) {
  li {
    width: 22%;
  }
  
  li:nth-child(n+5):nth-child(-n+8) {
    margin: 4px 0;
    padding: 16px 0;
    background: yellow;
  }
}
<ul>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
</ul>

使用JS（断点独立）

选择第二行中的元素

如果您确实需要一个不依赖于每个断点的特定代码的通用解决方案，您可以使用jQuery或普通JavaScript根据其位置选择第二行中的元素。添加一个类。

基本上，你将它们全部迭代，每当它们.offsetTop的值发生变化时，你就进入了下一行。

请注意，您必须收听resize event才能更新所选元素，以防万一其他断点处于活动状态并且列数已更改：

function styleSecondRow() {  
  let row = -1;
  let currentTop = -1;

  $('#grid > li').each(function() {
    let top = this.offsetTop;

    if (top > currentTop) {
      // We stepped into the next row:
      
      currentTop = top;
      
      ++row;
    }

    if (row === 1) {
      // Second row:
      
      this.classList.add('second-row');
    } else {
      // Remove .second-row from other rows:
      
      this.classList.remove('second-row');
    }
  });
}

// Update second row styling if window is resized:

$(window).resize(function() {
  styleSecondRow();
});

// Initialize second row styling for the firss time:

styleSecondRow();
img {
  max-width:100%;
  height:auto;
}

ul {
  max-width:1200px;
  list-style:none;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-wrap:wrap;
}

li {
  width:12%;
  font-size: 0;
}

.second-row {
  margin: 4px 0;
  padding: 16px 0;
  background: cyan;
}

@media (max-width: 720px) {
  li {
    width: 16%;
  }
}

@media (max-width: 480px) {
  li {
    width: 22%;
  }
}
<ul id="grid">
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
  <li><img src="http://placehold.it/300x300"></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

使用CSS

选择任何偶​​数行中的元素

如果要选择任何偶​​数行中的元素，则每个断点需要多个选择器，如@JacobDesight所示。例如，如果您有8列，则可以执行以下操作：

@media (...) {
    li {
        width: 12%;
    }

    li:nth-child(16n + 9),
    li:nth-child(16n + 10),
    li:nth-child(16n + 11),
    li:nth-child(16n + 12),
    li:nth-child(16n + 13),
    li:nth-child(16n + 14),
    li:nth-child(16n + 15),
    li:nth-child(16n + 16) {
        background: pink;

        ...
    }
}

请注意，您有多个规则，但只有一个属性块。

使用SCSS选择任何偶​​数行中的元素，避免重复代码

要使用SCSS执行相同操作，如果您忘记了一秒钟的媒体查询，通常会使用@mixin，@include，@for和{{ 1}}：

placeholder selector

这将生成以下代码：

// Placeholder selector that we will extend to avoid duplicating
// the properties for each generated nth-child selector:

%even-row { background: pink; }

// Mixin to avoid duplicating the @for block multiple times.
// It takes the number of columns as a parameter:

@mixin even-rows-mixin($columns) {
    @for $i from 1 through $columns {
        &:nth-child(#{2 * $columns}n + #{$i + $columns}) {
            @extend %even-row;
        }
    }
}

li {
    @include even-rows-mixin(8);
    width: 12%;
}

但是，您无法在媒体查询中使用li:nth-child(16n + 9), li:nth-child(16n + 10), li:nth-child(16n + 11), li:nth-child(16n + 12), li:nth-child(16n + 13), li:nth-child(16n + 14), li:nth-child(16n + 15), li:nth-child(16n + 16) { background: pink; } li { width: 12%; } 。

如果您移除@extend，则最终会得到与@extend建议类似的内容。您可以将其包装在@GCyrillus中，以避免在每个媒体查询中复制mixin块，但这仍然会生成重复的代码。 mixin将如下所示：

@for

它将生成@mixin even-rows-mixin($columns) { @for $i from 1 through $columns { &:nth-child(#{2 * $columns}n + #{$i + $columns}) { background: pink; } } } 个重复属性的选择器和块（在此示例中仅为$columns），如果您使用此background太多或者如果您使用此选项将使您的样式表快速增长添加更多属性。

编辑：我怀疑这可以使用插值完成，但不确定，所以我打开了另一个问题，有人来救援：SCSS @extend inside media query alternatives to avoid duplicate properties

基本上，您应该在mixin中构建一个选择器变量，并使用插值来创建一组具有固定属性的规则，如果您希望动态设置它们，则使用mixin：

@content

请注意，此代码不能在CodePen中编译，但在使用@mixin even-rows-mixin($columns, $rule) { $selector : ''; @for $i from 1 through $columns { $selector: $selector + $rule + '('+ #{2 * $columns}n + ' + ' + #{$i + $columns} + '),'; } #{$selector} { @content; // Or just add your properties here. } } ... @media(...) { ... @include even-rows-mixin(8, 'li:nth-child') { background: pink; }; ... } 或其他在线编译器时会执行此操作：http://beautifytools.com/scss-compiler.php

答案 2 :(得分：0)

由于您使用SCSS，您可以使用循环生成：nth-​​child（xn + x）选择器：https://codepen.io/anon/pen/VWpQbY?editors=1100 

li {
  width: 12%;

  @for $i from 1 through 8 {
    &:nth-child(16n + #{$i}) {
      background: red;
    }
  }

  @media (max-width: 720px) {
    width: 16%;
    &:nth-child(1n) {
      background: none;/* reset previous rule */
    }

    @for $i from 1 through 6 {
      &:nth-child(12n + #{$i}) {
        background: red;
      }
    }
  }
  @media (max-width: 480px) {
    width: 22%;
    &:nth-child(1n) {
      background: none;/* reset previous rule */
    }

    @for $i from 1 through 4 {
      &:nth-child(8n + #{$i}) {
        background: red;
      }
    }
  }
}

答案 3 :(得分：-1)

好的关键是知道每个断点上每行中有多少个图像。

如果在大屏幕上，你连续有6个项目，那么你想要7-12下划线（第二行），但不是13-18，而是19-24等。对于中等，它可能是4。小2，超小，1（仅举例）。

您可以使用Javascript选择这些行，并将类.second-row-items添加到其中。

您可能必须取容器的宽度并将其除以图像的宽度，以找出一行中可以容纳的项目数（n），然后获取项目的总数和将它除以适合行的项目数以获得行数。然后你可以编写一个函数来选择每个nth子项（以获取行）和nth兄弟（以获取整行）来添加你的类。

答案 4 :(得分：-1)

如果您只想选择偶数，请选择：nth-​​child {even}

在您的情况下，代码将是

ul li:nth-child(even){ border: 1px solid black;}
相关问题
最新问题