我可以为css编写一个循环吗

Question

我有一个场景，我可以像这样生成ID

<div class="containerLength">
<div id="new-1"></div>
<div id="new-2"></div>
<div id="new-3"></div>
<div id="new-4"></div>
</div>

诸若此类

有没有一种方法可以让我编写一些css来通过循环来定位它们？也许是像这样的

#new[i; for(i=0; i<="containerLength.length"; i++)]{
float:left;
}

也许我是在做白日梦，对吗？

Answer 1

你不能用纯CSS做循环，但是，如果你使用像SASS或更小的东西，那么你可以同时做这两件事：

SASS

@for $i from 1 through 4
  .#{$class-slug}-#{$i}
    width: 60px + $i

更少的

Can you do a javascript for loop inside of LESS css?

但是，假设您只想将相同的样式应用于每个嵌套的div，则可以这样做

.containerLength > div{
  float: left;
}

或者创建一个名为.float-left的类，并将其应用于您想要向右浮动的每个元素。

Answer 2

你可以做到

div.containerLength > div { /* > Matches only first level children of the wrapper div */
    float: left;
}

Answer 3

div[id|="new"]{
    float: left;
}

documentation

你可能需要也可能不需要引用，这有时很奇怪。