我可以为 css 写一个循环吗答案

【问题标题】：can I write a loop for css我可以为 css 写一个循环吗
【发布时间】：2013-06-07 15:25:05
【问题描述】：

我有这样一个场景，我会像这样生成 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

【解决方案1】：

你不能用纯 CSS 做循环，但是，如果你使用的是 SASS 或 LESS 之类的东西，那么你可以同时做：

SASS：

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

少：

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

.containerLength > div{
  float: left;
}

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

【讨论】：

【解决方案2】：

你可以的

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

【讨论】：

【解决方案3】：

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

您可能需要也可能不需要引号，有时这很奇怪。

【讨论】：

【解决方案4】：

你为什么不试试这个：

.containerLength > div {float:left}

【讨论】：

【解决方案5】：

您根本无法在 css 中编写任何逻辑。但是，您可以使用 JavaScript 管理 css，或者在一个规则中包含多个 id，或者只使用一个类。

您还可以使用 Css 属性选择器，具体取决于 id 的排列方式以及您需要浏览器支持的范围。

【讨论】：