Tạo kiểu cho một phần tử dựa trên vị trí của nó trong một nhóm

Question

Tôi đang cố gắng tạo một tập hợp các hộp. Tôi muốn thử và xem liệu tôi có thể đặt kích thước của hộp dựa trên vị trí của nó trong nhóm hay không.

Hiện tại điều này là có thể nếu tôi biết số lượng hộp trước và sử dụng bộ chọn :nth-child() và vị trí thích hợp.

Vì CSS đã có khả năng tìm vị trí của phần tử trong nhóm, nên có thể sử dụng vị trí này làm đầu vào cho kích thước.

Vì vậy, ví dụ như một cái gì đó giống như

#boxes:nth-child() { 
    height:calc(n * 10); 
    width:calc(n * 10); 
} 

mục đích này có thể dễ dàng đạt được bằng cách sử dụng mã phía máy chủ hoặc thậm chí Javascript nhưng chỉ tò mò muốn hiểu được nếu chúng ta có thể sử dụng CSS để đạt được điều này, sử dụng calc hoặc bất kỳ tính năng khác .

Answer 1

Trong bộ chọn CSS cấp 3, không có phương pháp để nhắm mục tiêu phần tử, sử dụng các biến tương ứng với vị trí của phần tử đó trong nhóm, điều chỉnh kiểu cho phần tử đó.

Trong CSS, chức năng calc() không cho phép biến. Chỉ các biểu thức toán học có phép cộng (+), phép trừ (-), phép nhân (*) và phép chia (/) mới được phép làm giá trị thành phần.

Với Sass, tuy nhiên, một bộ tiền xử lý CSS, sử dụng các biến trong một hàm calc() là có thể.

Tài liệu tham khảo:

• CSS Selectors Level 3
• 8.1. Mathematical Expressions: calc()
• Sass Variable in CSS calc() function
• Sass Variables

Answer 2

Bạn không thể làm điều này trong css tinh khiết, nhưng bạn có thể với SCSS. Ví dụ:

@for $i from 1 through 5 { 
    .box:nth-child(#{$i}) { 
    height: 50px * $i; 
    } 
} 

Bạn có thể chơi với mã here.