HTML   发布时间:2022-04-15  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – CSS奇怪,甚至有2个cols大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我的 HTML是这样的
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>

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

blue green
green blue
blue green
green blue

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

解决方法

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

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

article {Color:bluE}
article:nth-child(4n+2),article:nth-child(4n+3) {Color:green}

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

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

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

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

article {Color:green}
article:nth-child(4n),article:nth-child(4n+1) {Color:bluE}

大佬总结

以上是大佬教程为你收集整理的html – CSS奇怪,甚至有2个cols全部内容,希望文章能够帮你解决html – CSS奇怪,甚至有2个cols所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。