Question

假设我有50个元素网格。如果它的广泛列表，如果我颜色奇怪甚至div不同，它对读者来说很容易。现在让我说我想这样做，并且每隔5个div使用颜色代码。有没有办法根据数字选择应用哪个CSS？喜欢而不是

<div class="odd">blah</div>
<div class="even">blah</div>
<div class="odd">blah</div>
<div class="even">blah</div>
<div class="fifthOdd">blah</div>
...
<div class="fifthEven">blah</div>

做类似

的事情

<div class="1">blah</div>
<div class="2">blah</div>
...
<div class="5">blah</div>
...
<div class="10">blah</div>

允许编写css的人根据索引选择配色方案的工作方式？

Answer 1

是的，nth-child。请注意，nth-child在IE中不起作用，但它是一个有效的jQuery选择器，因此您可以将它与现代浏览器和纯CSS一起使用，或者与所有浏览器和一些表现性JavaScript一起使用。

Answer 2

您可以使用jQuery选择所有偶数或奇数节点，然后将css类应用于它们。

http://api.jquery.com/nth-child-selector/

$('#parentDiv:nth-child(even)').addClass('evenDivs');
$('#parentDiv:nth-child(odd)').addClass('oddDivs');

Answer 3

CSS无法根据类似名称进行选择。

有各种nth-selectors proposed for CSS 3，但浏览器支持目前很弱。

Answer 4

假设你实际上可以使用数字作为css类名，css可能看起来像

div.1, div.3, div.5, div.7
{
// Odd Style here
}

div.2, div.4, div.6, div.8
{
// Even Style here
}

不是那么漂亮，但足够灵活，可以按照你的要求行事。

我可以根据索引应用CSS吗？

4 个答案: