0

我确定这已经被问到了，但显然我不能完全正确地进行搜索。

我被困在使用精灵做某事，我想根据 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;
}

让我认为这可能是本文中的一些代码：

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

4

2 回答 2

4

你不能在 CSS 中使用它，除了一些特定的情况，（比如你已经提到的第 N 个元素）。但是您可以使用“编译”为 CSS 的其他语言。我正在使用 SCSS，是 Sassy CSS 的缩写，它是 SASS（Syntactically Awsome Style Sheets），但随后使用类似 CSS 的语法而不是不同的 SASS 语法（不使用大括号）。

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

我正在使用Leafo 出色的 SCSS 到 CSS 编译器。您可以键入 SCSS，编译器将按需生成 CSS。

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

但是，我经常自己寻找定义“100% - 10px”的方法，但我相信这在 CSS 中是不可能的。因此，在 SCSS 中也是不可能的。由于一切都编译为 CSS，因此您只能首先做 CSS 可能做的事情。SCSS 只会帮助您使它更容易。

于 2013-06-07T21:43:12.920 回答
0

您可以做的一些非常简单的事情（查看这篇文章）将 CSS 值作为数学表达式

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

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

li:first-child {properties...}
li:nth-child(2) {properties...}
li:nth-child(3) {properties...}
li:last-child {properties...}
于 2013-06-07T21:41:47.537 回答