交替行选择器

以下是它的工作原理，以及如何使用模来在不同颜色的行之间交替(这里是3):

ol >李:nth-child (3 n + 1) { 背景颜色:蓝色; ｝ ol >李:nth-child (3 n + 2) { 背景颜色:绿色; ｝ /*下面的选择器等价于"n -child(3n)"* / ol >李:nth-child (3 n + 3) { 背景颜色:红色; ｝ < ol > <李/ > <李/ > <李/ > <李/ > <李/ > <李/ > <李/ > <李/ > <李/ > < / ol >

如前所述，选择器中使用的行索引从1开始(而不是0)，这就是为什么第1、4、7行的选择器是第n -child(3n+1)。

选择器如何读取

对于索引i的行，选择器n -child(Mn+k)读起来就像(i % M == k)。例如，如果我们想选择所有以3为底取模等于2的行，我们可以在CSS中写n -child(3n+2)，换句话说，选择器是这样做的:

const M = 3;
const k = 2;

for (let i = 1; i < 10; i+=1){
    // The `nth-child(Mn+k)` selector: 
    if (i % M == k){
        console.log(`${i} selected`);
    }
}

输出

2 selected
5 selected
8 selected

我们可以使用奇数和偶数CSS规则和jQuery方法来替换行颜色

使用CSS

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

使用jQuery

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});

-柴油机 背景:# ccc; 的 股份有限公司股份有限公司股份有限公司股份有限公司股份有限公司股份有限公司股份有限公司股份有限公司股份有限公司股份有限公司股份有限公司股份有限公司 背景:# fff; 的 < table > < tr > 一号< td > < / td > 一号< td > < / td > < / tr > < tr > 二< td > < / td > 二< td > < / td > < / tr > - < table >

你有:n -child()伪类:

table tr:nth-child(odd) td{
    ...
}
table tr:nth-child(even) td{
    ...
}

在:n -child()的早期，它的浏览器支持有点差。这就是为什么设置class="odd"成为一种常见的技术。在2013年底，我很高兴地说IE6和IE7终于死了(或者病得不再关心了)，但IE8还在——谢天谢地，它是唯一的例外。

我能用这样的方式编写HTML吗 css呢?

是的，你可以，但你将不得不使用:n -child()伪选择器(虽然有有限的支持):

table.alternate_color tr:nth-child(odd) td{
    /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

交替行选择器

以下是它的工作原理，以及如何使用模来在不同颜色的行之间交替(这里是3):

ol >李:nth-child (3 n + 1) { 背景颜色:蓝色; ｝ ol >李:nth-child (3 n + 2) { 背景颜色:绿色; ｝ /*下面的选择器等价于"n -child(3n)"* / ol >李:nth-child (3 n + 3) { 背景颜色:红色; ｝ < ol > <李/ > <李/ > <李/ > <李/ > <李/ > <李/ > <李/ > <李/ > <李/ > < / ol >

如前所述，选择器中使用的行索引从1开始(而不是0)，这就是为什么第1、4、7行的选择器是第n -child(3n+1)。

选择器如何读取

对于索引i的行，选择器n -child(Mn+k)读起来就像(i % M == k)。例如，如果我们想选择所有以3为底取模等于2的行，我们可以在CSS中写n -child(3n+2)，换句话说，选择器是这样做的:

const M = 3;
const k = 2;

for (let i = 1; i < 10; i+=1){
    // The `nth-child(Mn+k)` selector: 
    if (i % M == k){
        console.log(`${i} selected`);
    }
}

输出

2 selected
5 selected
8 selected

在PHP中有一个相当简单的方法来做到这一点，如果我理解您的查询，我假设您在PHP中编码，您正在使用CSS和javascript来增强输出。

来自数据库的动态输出将携带一个for循环来遍历结果，然后将结果加载到表中。只需要像这样添加一个函数调用:

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

然后将函数添加到页面或库文件中:

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}    
}

现在，这将在每个新生成的表行中动态地在颜色之间交替。

这比在所有浏览器上都不能工作的CSS要容易得多。

希望这能有所帮助。