tôi có thể viết một vòng lặp cho css

Question

Tôi có một kịch bản mà tôi nhận được ID được tạo ra 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à vân vân

là 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? có thể là một cái gì đó như

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

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

Answer 1

Bạn không thể làm vòng với CSS tinh khiết, tuy nhiên, nếu bạn đang sử dụng một cái gì đó giống 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:

Can you do a javascript for loop inside of LESS css?

Tuy nhiên, giả sử bạn chỉ muốn áp dụng cùng một phong cách cho mỗi lồng nhau div, bạn chỉ có thể làm

.containerLength > div{ 
    float: left; 
} 

hoặc có lẽ tạo ra một lớp tên là .float-left và áp dụng nó vào mỗi yếu tố bạn muốn nổi phải.

Answer 2

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

.containerLength > div {float:left} 

Answer 3

Bạn có thể làm

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

Answer 4

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

documentation

Bạn có thể hoặc có thể không cần có dấu ngoặc kép, thật lạ đôi khi.

Answer 5

bạn không thể viết bất kỳ logic nào cả trong css. bạn có thể, tuy nhiên, 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 bộ chọn thuộc tính Css, tùy thuộc vào cách các id được sắp xếp 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