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

Paint with a color specific li elements

本文关键字：元素 绘制 li 颜色      更新时间：2023-09-26

我有这个html结构：

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

我需要按照以下顺序将li元素涂成红色。

第一、第三、第七、第十一等

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

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

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

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

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

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

有关JQuery奇数选择器的更多信息，请参阅此处

你可以在这里查看一个工作示例

我好像看错了你最初的顺序。。。

您可以在这里查看其他JQuery选择器，它们有助于序列匹配。

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

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

参见此处的示例

我相信这会的。

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

使用jQuery，您不必担心IE，它可以跨浏览器工作。

您可以使用CSS子选择器。

在UL标签上放置样式li:nth child（奇数）{color:red；}。

http://www.w3.org/TR/css3-selectors/#nth-子伪

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

在生成列表时，可以添加一个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/

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

相关文章：