html – CSS奇怪,甚至有2个cols

前端之家收集整理的这篇文章主要介绍了html – CSS奇怪,甚至有2个cols前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的 HTML是这样的:
  1. <article></article>
  2. <article></article>
  3. <article></article>
  4. <article></article>
  5. <article></article>
  6. <article></article>

并且在一行中有2篇文章与浮动,我希望他们改变颜色,如:

  1. blue green
  2. green blue
  3. blue green
  4. green blue

我怎么能用css做到这一点?

解决方法

一个模式中有四篇文章,因此4n的一些偏移应该可以解决问题.这似乎工作( Fiddle):
  1. article {color:blue}
  2. article:nth-child(4n-1),article:nth-child(4n-2) {color:green}

如果你不喜欢减去,加上也是一样的(Fiddle):

  1. article {color:blue}
  2. article:nth-child(4n+2),article:nth-child(4n+3) {color:green}

只是为了解释整个逻辑,这是转移4n模式的问题:

  1. 4n-3 4n-2 4n-1
  2. # COLOR 4n 4n+1 4n+2 4n+3
  3. -- ------ ----- ------ ------ ------
  4. 1 blue - 0 - -
  5. 2 green - - 0 -
  6. 3 green - - - 0
  7. 4 blue 1 - - -
  8. 5 blue - 1 - -
  9. 6 green - - 1 -
  10. 7 green - - - 1
  11. 8 blue 2 - - -
  12. 9 blue - 2 - -
  13. 10 green - - 2 -
  14. 11 green - - - 2
  15. 12 blue 3 - - -
  16. 13 blue - 3 - -

-1和3是全等模4,如-2和2所示,因此它们指的是相同的元素(尽管n的值在技术上对于每个元素是不同的).

你甚至可以交换它并将颜色4n和4n 1蓝色(Fiddle):

  1. article {color:green}
  2. article:nth-child(4n),article:nth-child(4n+1) {color:blue}

猜你在找的HTML相关文章