是否有任何方法可以在这种代码(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;等等……
我没有使用相邻选择器“+”的原因是我需要在同一个父级下输入但彼此靠近。
最好的问候
最佳答案
在 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/