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或LESS这样的东西，你可以这样做：

<强> SASS ：

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

<强> LESS ：

但是，假设您只想对每个嵌套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;
}

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

Answer 4

你为什么不试试这个：

.containerLength > div {float:left}

Answer 5

你不能在css中写任何逻辑。但是，您可以使用JavaScript管理css，或在一个规则中包含多个ID，或者只使用一个类。

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