无限量的帖子需要灵活的n-child公式

Question

关于灵活的n-child子公式的任何建议，允许我在下面的图像上重新显示此布局显示无限量的帖子？就像现在一样，我是使用nth-child（5），nth-child（8）等手动完成的：

Answer 1

nth-child()接受一个变量为n的公式，这可能正是你所要求的，就像编写无限量的规则一样，为每个n = 0的值求解公式，n = 1，n = 2，等等。

看起来你想要红色，绿色，绿色，红色，红色，绿色，绿色，红色，红色......

/* style all divs */
div.foo{
  /* green */
}
/* override styles on divs 0,3,6,9... */
div.foo:nth-child(4n-1),
div.foo:nth-child(4n){
  /* red */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 2

CSS逻辑有它的位置，但这是javascript（或服务器）的工作。在构建帖子时，计算它们，然后根据该数字获得适当的类名：

post_class = Math.round((post_num*.5)+.5) % 2 ? 'long' : 'short';

添加课程，并相应地编写您的CSS。如果您正在服务器上构建html，那么只是对您的服务器端语言进行舍入，这是相同的概念。

---

编辑：显然我的CSS上还没有足够的日期

div:nth-child(4n-2), div:nth-child(4n-1) {
   /* short styles */
}

http://jsfiddle.net/g6bAj/1/

Answer 3

您需要使用覆盖以前样式元素的多个nth-child选择器。

让我们说这是HTML：

<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>
</ul>

CSS

/* make all li elements green and 75% wide */
li {
  float: left;
  width: 75%;
  background: green;
  padding: 20px; /* for style */
  margin-bottom: 20px; /* for style */
}

/* Make the 'even' ones 25% wide. */
li:nth-child(even) {
  width: 25%;
}

/* Make every 'fourth' one 25% wide and have a red background */
li:nth-child(4n+1) {
  width: 25%;
  background: red;
}

/* Make every fourth one's (starting from 1) adjacent sibling 75% wide */
li:nth-child(4n+1) + li {
  width: 75%;
}

/* Make every fourth one (starting from 4) have a red background */
li:nth-child(4n+4) {
  background: red;
}

<强> Demo