Question

我有这个html结构：

<ul>
<li></li>
<li></li>
<li></li>
...
</ul>

我需要按照以下顺序为li元素绘制红色。

第1，第3，第7，第11等

请记住li元素是动态生成的。

Answer 1

等待进一步的信息，如果您需要绘制第一个元素，然后绘制每个4n-1元素，只需使用psuedoclasses：

li:first, li:nth-child(4n-1) { 
   color: ... 
}

除了注意，这些伪造的类在旧的IE浏览器上不起作用，因此如果您还需要为IE7设置一些特定的列表项，请考虑在服务器端生成标记时输出一些类（或者通过jQuery将元素应用于元素

Answer 2

这应该适用于选择奇数元素

$("li:odd").css("color", "#F00");

See here for more info on the JQuery odd selector

You can view a working example here

因为我似乎误读了你的初始序列......

还有其他JQuery选择器可以check out here帮助进行序列匹配。

与您的序列匹配的一些示例代码可能是......

$("li:first").css("color", "#F00");
$("li:nth-child(4n-1)").css("color", "#F00");

See here for example

Answer 3

我确信这样做。

<script>$("ul li:first, ul li:nth-child(4n-1)").css({'color':'red'});</script>

使用jQuery你不必担心IE浏览器，它可以使用crossbrowser。

Answer 4

您可以使用CSS子选择器。

放样式li：nth-child（单数）{color：red;在UL标签上。

http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

Answer 5

使用它 $("li:odd").css("color", "red");

Answer 6

您可以添加HTML类，以在生成列表时区分偶数项和奇数项。然后根据它们的序数位置，很容易将不同的CSS规则应用于元素。

我会编写一个非常通用的PHP代码来执行此操作，假设您从名为$ list的数组生成列表：

<ul>
<?php
for( $j=1; $j <= count( $list ); $j++ ):

    if( ( $j % 2 ) == 0 )
    {
        $class = 'even'
    }
    else
    {
        $class = 'odd'
    }
?>
    <li class="<?php echo $class;?>"><?php echo $list[$j-1];?></li>
<?php endfor;?>
</ul>

我刚刚看到你用jquery和javascript标记了这个问题，你应该首先检查jQuery文档，并且在你寻求帮助之前作为一般规则，GOOGLE IT。

http://api.jquery.com/category/selectors/

我仍然使用生成列表的服务器端语言来完成它。

使用颜色特定的li元素进行绘制

6 个答案: