Trung tâm cá nhân
sách gpt4 ai đã đi

CSS trừu tượng

In lại 作者：太空宇宙 更新时间：2023-11-04 08:01:31 30 4
mua khóa gpt4 Nike

是否有任何方法可以在这种代码(sass)中制定 css 的抽象规则:

#cottage-image-gallery input:nth-of-type(1):checked ~ label:nth-of-type(1) img,
#cottage-image-gallery input:nth-of-type(2):checked ~ label:nth-of-type(2) img,
#cottage-image-gallery input:nth-of-type(3):checked ~ label:nth-of-type(3) img,
#cottage-image-gallery input:nth-of-type(4):checked ~ label:nth-of-type(4) img,
#cottage-image-gallery input:nth-of-type(5):checked ~ label:nth-of-type(5) img,
#cottage-image-gallery input:nth-of-type(6):checked ~ label:nth-of-type(6) img,
#cottage-image-gallery input:nth-of-type(7):checked ~ label:nth-of-type(7) img,
#cottage-image-gallery input:nth-of-type(8):checked ~ label:nth-of-type(8) img
  position: fixed

可以变成这样:

#cottage-image-gallery input:nth-of-type(n):checked ~ label:nth-of-type(n) img
  position: fixed

当 n 等于 1 时，第二个变量也是如此；当 n 等于 2 时，第二个变量变为 2；等等……

我没有使用相邻选择器“+”的原因是我需要在同一个父级下输入但彼此靠近。

最好的问候

Ví dụ:https://codepen.io/s3m3nT3s/pen/rYBxLq

1 Câu trả lời

在 Sass 中，你可以使用 @for directive做这个。

@for $i from 1 through 8
  #cottage-image-gallery input:nth-of-type(#{$i}):checked ~ label:nth-of-type(#{$i}) img
    position: fixed

输出这个:

#cottage-image-gallery input:nth-of-type(1):checked ~ label:nth-of-type(1) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(2):checked ~ label:nth-of-type(2) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(3):checked ~ label:nth-of-type(3) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(4):checked ~ label:nth-of-type(4) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(5):checked ~ label:nth-of-type(5) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(6):checked ~ label:nth-of-type(6) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(7):checked ~ label:nth-of-type(7) img {
  position: fixed;
}
#cottage-image-gallery input:nth-of-type(8):checked ~ label:nth-of-type(8) img {
  position: fixed;
}

但是，给定这样的 HTML:



















在纯 CSS 中根本无法将 input[id="slide1"] Và label[for="slide2"] 匹配，input[ id="slide2"] Và label[for="slide2"]，等等，而不用像你已经在 :nth-child( ).

这样做的 CSS 方式类似于:

#cottage-image-gallery input:nth-of-type([id]):checked ~ label:nth-of-type([for]) img

但是你不能在 :nth-child() 中使用属性选择器。也许在未来!

关于css - 抽象 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46976348/

30 4 0
Bài viết được đề xuất: c - 如何在 C 中为 int(不是 int*)数组动态分配内存？
Bài viết được đề xuất: javascript - 函数调用后虚拟数组值未填充
Bài viết được đề xuất: html - 如何使这个导航菜单居中
Bài viết được đề xuất: java - JR报告不显示数据
太空宇宙
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com