Question

我确信这已经被问过了，但显然我不能说它非常适合搜索。

我坚持使用精灵来做某事，我想根据HTML中元素的位置自动计算背景位置。

以下是一些希望更有意义的代码（这实际上并不起作用，只是为了演示我想要做的事情）：

HTML：

<ul>
    <li><!--first item--></li>
    <li><!--second item--></li>
    <li><!--third item--></li>
</ul>

CSS：

ul li {
    background-position-x: (number of previous LIs * 45px) + 45px;
}

让我觉得这可能的原因是来自this article的一些代码：

:nth-child(N) - 根据简单提供的代数选择元素表达式（例如2n或4n-1）。有能力做的事情选择偶数/奇数元素，“每三分之一”，“前五个”和事物那样的。

Answer 1

除了某些特定情况外，你不能在CSS中使用它（比如你已经提到过的第N个元素）。但是你可以使用“编译”到CSS的其他语言。我正在使用SCSS，Sassy CSS的缩写，它是SASS（语法Awsome样式表），但后来用类似CSS的语法而不是SASS语法，这是不同的（不使用花括号）。

在http://sass-lang.com/上，两者都有解释。

我正在使用Leafo's great SCSS to CSS compiler。您可以键入SCSS，编译器将根据需要生成CSS。

SCSS的优点在于它与CSS兼容。因此，您可以将CSS文件重命名为.scss。之后，您可以使用变量和代数来增强它们。

但是，我经常在寻找自己定义'100％ - 10px'的方法，但我相信这在CSS中是不可能的。因此，在SCSS中也是不可能的。由于所有内容都编译为CSS，因此您只能在CSS中执行可能的操作。 SCSS只能帮助您更轻松地完成任务。

Answer 2

你可以做一些非常简单的事情（查看这篇文章） CSS value as mathematical expression

我强烈建议使用SCSS（讨厌SASS语法：D）。更好的尝试罗盘;）

另外，在你的情况下......一如既往......取决于你的胃口！（SCSS也支持循环...;）

li:first-child {properties...}
li:nth-child(2) {properties...}
li:nth-child(3) {properties...}
li:last-child {properties...}