gpt4 book ai didi

css - 抽象 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 08:01:31 29 4
gpt4 key购买 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;等等……

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

最好的问候

示例:https://codepen.io/s3m3nT3s/pen/rYBxLq

最佳答案

在 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:

<input id="slide1" type="radio" name="cottage-image" data="1">
<input id="slide2" type="radio" name="cottage-image">
<input id="slide3" type="radio" name="cottage-image">
<input id="slide4" type="radio" name="cottage-image">
<input id="slide5" type="radio" name="cottage-image">
<input id="slide6" type="radio" name="cottage-image">
<input id="slide7" type="radio" name="cottage-image">
<input id="slide8" type="radio" name="cottage-image">
<input id="slide0" type="radio" name="cottage-image" checked>
<label for="slide1"><img src="http://calhaugrande.com/img/sol/1.jpg"></label>
<label for="slide2"><img src="http://calhaugrande.com/img/sol/2.jpg"></label>
<label for="slide3"><img src="http://calhaugrande.com/img/sol/3.jpg"></label>
<label for="slide4"><img src="http://calhaugrande.com/img/sol/4.jpg"></label>
<label for="slide5"><img src="http://calhaugrande.com/img/sol/5.jpg"></label>
<label for="slide6"><img src="http://calhaugrande.com/img/sol/6.jpg"></label>
<label for="slide7"><img src="http://calhaugrande.com/img/sol/7.jpg"></label>
<label for="slide8"><img src="http://calhaugrande.com/img/sol/8.jpg"></label>
<label for="slide0"></label>

在纯 CSS 中根本无法将 input[id="slide1"]label[for="slide2"] 匹配,input[ id="slide2"]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/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com