如何编辑表格中最后一行的 CSS？

Question

这是我创建的表。 我几乎是 Web 编程的初学者，因此将不胜感激。 我试图弄清楚如何将 CSS 添加到创建表的最后一行。 这段代码所做的基本上是制作一个有 4 行的表格，并计算平方数、阶乘和一行中元素的总和。 表的底部是包含每列元素总和的行。 例如，如何添加样式以使背景颜色为深蓝色？ 提前致谢：）

  function tablica() {
        var sum1 = 0,
            sum2 = 0,
            sum3 = 0;
        var nr = document.getElementById("broj").value
        if (nr < 2) {
            document.getElementById("rezultat").innerHTML = "Prilagođeno samo za rad s brojevima većim od 1";
            window.alert("Unijeli ste broj " + broj.value + ", a taj broj je manji od 2...");
        } else {
            var rez = "<table id='tablica' class='tabClass'><tr><th>N</th><th>N²</th><th>N!</th><th>Suma</th></tr>";
            var faktorijela = 1;
            for (var i = 1; i <= nr; i++) {
                let val1 = i;
                let val2 = i * i;
                let val3 = (faktorijela = faktorijela * i);
                rez = rez + "<tr><td>" + val1 + "</td><td>" + val2 + "</td><td>" + val3 + "</td><td>" + (val1 + val2 + val3)
                "</td></tr>";
                sum1 = sum1 + val1;
                sum2 = sum2 + val2;
                sum3 = sum3 + val3;

            }
            rez = rez + "<tr><td>" + sum1 + "</td><td>" + sum2 + "</td><td>" + sum3 + "</td><td>∑</td></tr>";
            rez = rez + "</table>";

        }
        var rezTablica = document.getElementById("rezultat");
        rezTablica.innerHTML = rez;
    }

Answer 1

使用:last-child或:last-of-type伪类。

 table { border-collapse: collapse; } table td { padding: 5px; } table tr:last-child { background: salmon; }

 <table> <tbody> <tr> <td>col1</td> <td>col2</td> </tr> <tr> <td>col1</td> <td>col2</td> </tr> <tr> <td>col1</td> <td>col2</td> </tr> </tbody> </table>

Answer 2

如果要编辑行中的最后一个元素，可以使用:last-child选择最后一行。

你可以在这里阅读更多。