我能为css写一个循环吗

ar5n3qh5 于 2022-12-24 发布在其他

关注(0)|答案(5)|浏览(81)

我有这样一个场景：我将获得如下生成的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;
}

也许我是在做白日梦吧？

css

来源：https://stackoverflow.com/questions/16987692/can-i-write-a-loop-for-css

5条答案

按热度按时间

7hiiyaii1#

你不能用纯CSS来做循环，但是，如果你使用像SASS或LESS这样的东西，那么你可以像这样做：

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的类，并将其应用于要向右浮动的每个元素。

赞(0）回复(0）举报 2022-12-24

quhf5bfb2#

你能做到

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

赞(0）回复(0）举报 2022-12-24

6qqygrtg3#

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

文件
你可能需要也可能不需要这些引语，有时候很奇怪。

赞(0）回复(0）举报 2022-12-24

63lcw9qa4#

你不能在css中写任何逻辑。但是，你可以用JavaScript管理css，或者在一个规则中包含多个id，或者仅仅使用一个类。
您还可以使用Css属性选择器，这取决于id的排列方式以及您需要浏览器支持的范围。
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

赞(0）回复(0）举报 2022-12-24

gstyhher5#

你为什么不试试这个：