在scss中,可以使用nth-child伪类来访问DOM元素的第一个子元素: &:nth-child(1):before{ content:"First Child"; } 案例 div{ &:nth-child(1):before{ content:"First Child"; font-weight: bold; } &:nth-child(2):before{ content:"Second Child"; font-style: italic; } &:nth-child(3):before...
:nth-child(n) { //你的样式代码 } ``` 请注意,这里的`n`可以是一个具体的数字,也可以是一个表达式。例如: *如果想选择一个父元素下的第2个子元素,可以使用`:nth-child(2)`。 *如果想选择一个父元素下的奇数个子元素,可以使用`:nth-child(odd)`。 *如果想选择一个父元素下的偶数个子元素,可以使...
.icon-item:nth-child(5){background-position:-8px-70px;} .icon-item:nth-child(6){background-position:-95px-70px;} .icon-item:nth-child(7){background-position:-182px-70px;} .icon-item:nth-child(8){background-position:-269px-70px;} 使用scss 编写 $for $i from 1 through 8 { ...
SASS 函数迭代 nth-child(n+1) 和变亮/变暗($color, 5n%) 我使用了很多 SASS/SCSS,但通常不使用复杂的任何功能。我目前的需求似乎是函数的完美用例,但不确定如何在 SASS/SCSS 中像这样循环。 我需要一个阶梯式颜色模式来更改每个附加列表项的背景颜色。
li:nth-child(3n + 2) { color: red; } li:nth-child(3n + 3) { color: green; } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 以上,只三种颜色循环,简单情况下可这样处理。但样式多起来之后,上面代码显得很臃肿且不易维护。 既然是使用 SASS,很容易想到可通过编写循环语句来将其简化。
$i:index($liColor,$c);//获取 $c 在数组中的索引,并赋值给 $i 赋值用冒号,不是等号~!li:nth-child( #{$i} ){//经典的地方来了,SCSS 循环是从 1 开始,不是 0 哦~background: $c;//背景色&:hover{ background: lighten($c,10%);//hover 后的颜色} ...
如何在 Element BEM Scss 中选择 nth-child B.V*_*mar 5 sass bem 我正在使用 BEM Scss 请解释如何在第 n 个子元素中进行选择。我尝试了以下格式,但它对我不起作用 Run Code Online (Sandbox Code Playgroud) 我的BEM Scss 我添加...
.list__item:nth-child(7) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } 参考资料 使用CSS动画CSS3 animation-timing-function 属性sass中文文档 [1]:https://blog.cdn.thinkmoon.cn/blog/typecho/list.gif [2]:https://blog.cdn.thinkmoon.cn/blog/typecho/2019-12-04T03:58:02.png ...
SCSS使用@each方法循环遍历数组颜色并给li赋值 SCSS使⽤@each⽅法循环遍历数组颜⾊并给li赋值$list-bg:red,orange,blue,skyblue;ul{ >li{ height: 30px;@each $c in $list-bg{ $i:index($list-bg,$c);&:nth-child(#{$i+1}){//+1是除了第⼀个以外的li background: nth($list-bg,$i)...
我想到的是使用scss语言循环判断是否是每行的第六七个元素即可:(一行七天i%7) scss文件:/index.scss 复制 // 6*7 格子 @for $i from 1 through 42 { @if $i % 7 == 0 { .date:nth-child(#{$i}) { color: var(--red); } .date:nth-child(#{$i - 1}) { ...