html – 基于第n个术语计数的样式CSS

2023年7月3日 205次阅读

我有一个短的css nth-of-type()块,我想根据它们的n计数来设置对象的样式.我已经浏览了谷歌,但未能找到答案.这是我的代码：

a:nth-of-type(n + 3){
    top: 950px;
}

是否可以以任何方式更改顶部：取决于n计数位,以便它看起来像：

a:nth-of-type(n + 3){
    top: 950px * n;
}

谢谢

最佳答案 简而言之,没有.

遗憾的是,CSS不能像这样工作.尽管它看起来像什么,但n不会成为你可以在那个风格块中使用的变量.它用于表示您使用表单(b)指定循环大小a和起始计数器b.例如,a：nth-​​of-type(2n 3)将从第三个开始选择每个其他锚元素.

要执行类似于您所描述的内容,您需要使用javascript或CSS预编译器,如LESS或SASS.

额外奖励：如果你很好奇,你可以在jQuery中做这样的事情来实现你想用纯CSS做的事情：

$('a').each( function( n, element ) {
    if ( n > 2 ) $(element).css('top',(n*950)+'px');
});

或者,如果你想使用像SASS这样的预处理器(这对于样式的JS解决方案来说是优选的),你可以这样做：

$max: 100 // or whatever maximum number of elements you need to account for
@for $i from 3 to $max
  a:nth-of-type(#{$i})
    top: #{$i*950}px

奖励2：这是David Thomas在评论中相当优雅的纯JS解决方案：

Array.prototype.forEach.call(document.querySelectorAll('a'), function (aElem, index) {
    if (index > 2) {
        aElem.style.top = (index * 90) + 'px';
    }
});

http://jsfiddle.net/davidThomas/23nfskwb/(请注意,虽然使用较小的乘数90而不是950,但这只是一个简单的演示,使用950将是完全可以接受的)

点赞