css - 我可以为 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;
}

可能我是在做白日梦吧？

score 13 · Accepted Answer

您不能使用纯 CSS 进行循环，但是，如果您使用的是 SASS 或 LESS 之类的东西，那么您可以同时执行以下操作：

萨斯：

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

少：

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

.containerLength > div{
  float: left;
}

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

score 3 · Accepted Answer

你可以做

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

1

你为什么不试试这个：

.containerLength > div {float:left}

于 2013-06-07T15:27:33.233 回答

5 回答 5