Question

我正在研究一个项目，我正在使用ul和li。

我必须更改3个替代li的背景。由于列表项来自后端，我不知道列表项的数量。

我尝试使用css3子类，但无法实现..有什么办法可以用css或jquery实现这个目的吗？

＆＃13;

.list-item li
{
  width:30%;
  display:inline-block;
 }

＆＃13;

<ul class="list-item">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
  <li>list item 7</li>
  <li>list item 8</li>
  <li>list item 9</li>
</ul>

＆＃13;

＆＃13; 列表1,2,3,7,8和9的背景颜色相同，列表4,5和6的背景颜色不同。

正如您在image中所看到的，我在这里使用表格，而我正在使用n-child（偶数）/（奇数）属性实现这一目标。由于几乎没有限制我无法做到在这里使用表格。所以需要使用li来实现这一点。

Answer 1

我想你想要实现这个目标吗？

要更改每个第三个项目的样式，请使用:nth-child()，即3n + 0作为参数。如果你在从0向上计算n时解决了这个等式，你将得到将要解决的项目的索引。

顺便说一下：

换句话说，

2n + 0甚至是换句话说，2n + 1是奇数

编辑：

我添加了一个JS函数来实现类似交替的行，就像之后在问题中添加的图片一样。看看小提琴吧！

＆＃13;

var alternate = (function() {

  var count = 0;
  var flipAt = 3;
  var condition = false;

  function init(num) {
    flipAt = num;
  }
  
  function process() {
    if(count === flipAt) {
      condition = condition ? false : true;
      count = 0;
    }
    count++;
    return condition ? true : false;
  }

  return {
    init : init,
    process : process
  }
})()


$('li').each(function(index, el) {
  if (alternate.process()) {
    $(el).css('background', 'blue');
  }
});

＆＃13;

li:nth-child(3n+0) {
    background: red;
}

li:nth-child(3n+1) {
    border: 2px solid green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>14</li>
</ul>

＆＃13;

Answer 2

哟可以使用以下CSS

li:nth-child(3n+0) {
    background: red;
}
li:nth-child(3n+1) {
    background: green;
}
li:nth-child(3n+2) {
    background: blue;
}

表示工作示例Click here

Answer 3

您需要设置6n，6n-1和6n-2个项目的样式：

.list-item li
{
  width:30%;
  display:inline-block;
  background: #cfc;
 }
.list-item li:nth-child(6n-2),
.list-item li:nth-child(6n-1),
.list-item li:nth-child(6n){
  background: #ccf;
}

<ul class="list-item">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
  <li>list item 7</li>
  <li>list item 8</li>
  <li>list item 9</li>
  <li>list item 10</li>
  <li>list item 11</li>
  <li>list item 12</li>
  <li>list item 13</li>
  <li>list item 14</li>
  <li>list item 15</li>
  <li>list item 16</li>
  <li>list item 17</li>
  <li>list item 18</li>
</ul>

单独设计3个备用款式

3 个答案: