Question

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

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

是否可以根据n计数更改top:位，以便它显示为：

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

由于

Answer 1

简而言之，没有。

不幸的是，CSS并不像这样工作。尽管它看起来像，n不会成为你可以在那个样式块中使用的变量。它用于表示您使用表单(an + b)指定周期大小a和起始计数器b。例如，a:nth-of-type(2n + 3)将从第三个开始选择所有其他锚元素。

要做类似于你所描述的内容，你需要使用javascript或像LESS或SASS这样的CSS预编译器。

加分：如果你有点好奇，你可以在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

Bonus 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是完全可以接受的）

Answer 2

不，目前CSS无法实现。

实现这样的事情的最佳方法是使用像SASS或LESS这样的预处理器，不来使用JavaScript（或像jQuery这样的库）。这是因为样式应该尽可能不需要JavaScript，因为它会在每次加载页面后计算它，而不是像服务器那样在预处理器上执行它。

在这里，我使用SCSS，一种类似CSS的SASS变体，来做你想要做的事情（未经测试）。

$n:30; /* The max number of objects (really the max -3 number in your case) */
@for $i from 1 to $n {
  a:nth-of-type(#{$i} + 3) {
    top: 950px * #{$i};
  }
}

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

2 个答案: