[分享]css3单双行循环

CSS3单双行循环是一种常用的样式处理技术，它可以制作出优美的交错排列效果。例如，我们要制作一组交错排列的文本，就可以使用下面的CSS样式： .wrapper { display: flex; fle...

CSS3单双行循环是一种常用的样式处理技术，它可以制作出优美的交错排列效果。例如，我们要制作一组交错排列的文本，就可以使用下面的CSS样式：

 .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  p {
    width: 50%;
    text-align: center;
    padding: 20px 0;
    margin: 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
  }

  p:nth-child(even) {
    background-color: #e3e3e3;
  } 

上面代码中，我们将一组文本包裹在一个类名为.wrapper的容器中，并设置它为弹性盒子（display:flex），允许它的子元素自动换行（flex-wrap:wrap）。每个文本块都被限定了宽度为50%，对齐方式为居中（align-items:center），并设置了上下边框。而通过使用伪类选择器:nth-child(even)，我们对偶数行的文本块设置背景颜色以达到交错排列的效果。

除了通过伪类选择器:nth-child()来控制交错排列，我们还可以尝试使用更加灵活的伪类选择器:nth-of-type()。例如，我们可以修改上面的CSS样式，将它的伪类选择器从:nth-child()改为:nth-of-type()：

 p:nth-of-type(even) {
    background-color: #e3e3e3;
  } 

这样，我们就可以在包含多个不同类名的子元素的.container容器中，通过仅设置它子元素中特定类型元素的样式来实现交错排列效果。这种方法不仅可以帮助我们简化样式表代码，还可以在用户更改网站样式表的情况下避免不必要的影响。