Hướng dẫn can we use for loop in css? - chúng ta có thể sử dụng vòng lặp for trong css không?

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Vòng lặp là một trong những tính năng mà bạn không cần mỗi ngày. Nhưng khi bạn làm, nó rất tuyệt khi các tiền xử lý có thể làm điều đó bởi vì HTML và CSS bản địa không thể.

Sass (SCSS)

for Vòng lặp

while Vòng lặp

each Vòng lặp

Ít hơn

for Vòng lặp

while Vòng lặp

each Vòng lặp

each Vòng lặp

Ít hơn

for Vòng lặp

while Vòng lặp

each Vòng lặp

each Vòng lặp

Ít hơn

.

for Vòng lặp

while Vòng lặp

each Vòng lặp

Ít hơn

for Vòng lặp

while Vòng lặp

each Vòng lặp

Ít hơn

for Vòng lặp

while Vòng lặp

each Vòng lặp

Tôi có một kịch bản mà tôi nhận được ID được tạo như thế này

<div class="containerLength">
<div id="new-1"></div>
<div id="new-2"></div>
<div id="new-3"></div>
<div id="new-4"></div>
</div>

và như thế

Có cách nào tôi có thể viết một số CSS để nhắm mục tiêu chúng thông qua một vòng lặp không? Có lẽ một cái gì đó giống như

#new[i; for(i=0; i<="containerLength.length"; i++)]{
float:left;
}

Có lẽ tôi đang mơ ước đúng không?

Đã hỏi ngày 7 tháng 6 năm 2013 lúc 15:25Jun 7, 2013 at 15:25

9

Tuy nhiên, bạn không thể thực hiện các vòng lặp với CSS thuần túy, nếu bạn đang sử dụng thứ gì đó như SASS hoặc ít hơn thì bạn có thể làm cả hai như:

SASS::

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

LESS::

Bạn có thể làm một JavaScript cho vòng lặp bên trong ít CSS hơn không?

Tuy nhiên, giả sử bạn chỉ muốn áp dụng cùng một phong cách cho mỗi

.containerLength > div{
  float: left;
}

.containerLength > div{
  float: left;
}

Hoặc có lẽ tạo một lớp có tên

.containerLength > div{
  float: left;
}

Đã trả lời ngày 7 tháng 6 năm 2013 lúc 15:29Jun 7, 2013 at 15:29

Tù nhânPrisoner

Phù hiệu vàng 27K1072 Huy hiệu bạc101 Huy hiệu đồng10 gold badges72 silver badges101 bronze badges

Bạn có thể làm

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

Đã trả lời ngày 7 tháng 6 năm 2013 lúc 15:27Jun 7, 2013 at 15:27

Karthikrkarthikrkarthikr

94,7K25 Huy hiệu vàng191 Huy hiệu bạc186 Huy hiệu đồng25 gold badges191 silver badges186 bronze badges

4

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

tài liệu

Bạn có thể hoặc không cần trích dẫn, đôi khi nó thật kỳ lạ.

Đã trả lời ngày 7 tháng 6 năm 2013 lúc 15:28Jun 7, 2013 at 15:28

Bạn không thể viết bất kỳ logic nào trong CSS. Tuy nhiên, bạn có thể quản lý CSS với JavaScript hoặc bao gồm nhiều ID trong một quy tắc hoặc chỉ sử dụng một lớp.

Bạn cũng có thể sử dụng các bộ chọn thuộc tính CSS, tùy thuộc vào cách sắp xếp ID và mức độ bạn cần hỗ trợ trình duyệt của mình.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Đã trả lời ngày 7 tháng 6 năm 2013 lúc 15:31Jun 7, 2013 at 15:31

DougmdougmDougM

2.66316 Huy hiệu bạc14 Huy hiệu đồng16 silver badges14 bronze badges

1

Tại sao bạn không thử điều này:

.containerLength > div {float:left}

Đã trả lời ngày 7 tháng 6 năm 2013 lúc 15:27Jun 7, 2013 at 15:27

KarthikrkarthikrAlexandru R

94,7K25 Huy hiệu vàng191 Huy hiệu bạc186 Huy hiệu đồng16 gold badges60 silver badges95 bronze badges

Chúng ta có thể sử dụng cho vòng lặp trong SCSS không?

Chúng tôi có thể đăng ký Loop trong HTML không?

Khi nào chúng ta sẽ sử dụng một vòng lặp?

Tại sao chúng ta sử dụng cho vòng lặp trong HTML?