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)- 根据提供的简单代数表达式(例如2n4n-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 回答