我可以为css写一个循环 [英] can I write a loop for css

问题描述

我有一个场景，其中我得到的ID生成像这样

I have a scenario where I am getting ID generated like this

<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来通过一个循环目标他们？
可能是像

is there a way I could write some css to target them through a loop? maybe something like

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

我可能是在做梦吗？

推荐答案

不能使用纯CSS进行循环，但是，如果你使用SASS或LESS，做两个喜欢：

You can't do loops with pure CSS, however, if you're using something like SASS or LESS then you can do both like:

SASS ：

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

LESS ：

你可以在LESS CSS中使用javascript for循环吗？

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

However, assuming you just want to apply the same style to each nested div, you can just do

.containerLength > div{
  float: left;
}

或者创建一个名为的类.float-left 并将其应用于您希望浮动的每个元素。

or perhaps create a class named .float-left and apply it to each element you want floated right.

这篇关于我可以为css写一个循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！