logo标签列表

可以为CSS编写循环吗？

css
15

我有一个场景，其中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;
}

我大概是在白日做梦吧？

4
用普通的 CSS 无法做到。为什么不给这些元素分配一个类呢？不过你可以尝试 div.containerLength > div {...}。 - j08691
1
div.containerLength div[id^="new"] { float: left; } 这是一段CSS代码，用于选择所有id以"new"开头的div元素，并将它们向左浮动。你想对这些被找到/循环的元素做什么？ - David Thomas
1
CSS不是过程式的。你可以针对.containerLength > div {float:left;}进行定位，但那里没有循环的概念。 - vals
考虑循环 CSS 基本上是误解了 CSS 的工作方式。 - Spudley
你甚至不应该想要这样做。将演示与逻辑分开。 - Alex Gill
显示剩余4条评论
5个回答
17

纯CSS无法实现循环，但是如果你使用类似于SASS或LESS的工具，则可以像下面这样同时实现两者：

SASS：

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

LESS:

你能在LESS css中使用JavaScript for循环吗？

但是，假设您只想将相同的样式应用于每个嵌套的

元素，您可以执行以下操作

.containerLength > div{
  float: left;
}

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

4

您可以做以下操作

div.containerLength > div { /* > Matches only first level children of the wrapper div */
    float: left;
}
1
你其实不需要最初的“div”，“.containerLength > div”就足够了。 - Marco Luglio
@facildelembrar 我通常喜欢保持事情更加明确。我同意这并非必需。 - karthikr
2
使用CSS时，最好过于具体而不是不够具体。只选择您想要更改的内容，而不要多余。我无法告诉您我花费了多少工作时间来修复糟糕的CSS选择器。 - user1846065
2
我曾经同意你们的做法，使用标签选择器和类选择器。但是让我改变主意的原因是性能，以及在较小程度上的文件大小。请使用yslow和pagespeed检查您的页面。 - Marco Luglio
3
div[id|="new"]{
    float: left;
}

文档

有时候你可能需要引号，有时候又不需要，这很奇怪。

2
谢谢大家。这真的很棒。感谢你们的帮助。 - soum
1
为什么不尝试这个：

.containerLength > div {float:left}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接