使用 CSS 以 ID 定位 table 内的特定 class - 更改 ROW 背景

Question

我有一个 table 看起来像这样：

<table class="table table-striped table-hover table-responsive" id="commenttable">
    <thead>
        <th>Status</th>
        <th>Subject</th>
        <th>Message</th>
        <th>Tech</th>
        <th>Emailed?</th>
        <th>Date/Time</th>
    </thead>
    <tbody>
        <?php
            foreach($commresult as $row)
            {
                if($row['commentPrivate'] == 'yes'){
                    echo "<tr class='private'>";
                }
                else{
                    echo "<tr>";
                }
                echo "<td>" . ucwords($row['commentType']) . "</td>";
                echo "<td>" . ucwords($row['commentSubject']) . "</a></td>";
                echo "<td>" . $row['commentMessage'] . "</td>";
                echo "<td>" .  ucwords($row['commentBy']) . "</td>";
                echo "<td>" .  ucwords($row['commentEmailComm']) . "</td>";
                echo "<td>" . $row['commentDate'] . "</td>";
                echo "</tr>";
            }
        ?>
    </tbody>

我想做的是 if $row['commentPrivate'] == 'yes' 我想将该行的背景颜色更改为红色。

我试过只使用 <tr bgcolor="#ff7f7f"> 但没有用。所以现在我只是尝试将 class 'private' 添加到该行并使用 CSS 定位它，我认为我失败得很惨。

这是 css：

.private {
background-color: #ff7f7f;
}

我也试过：

#commenttable tbody .private {
background-color: #ff7f7f;
}

感谢任何帮助。

Answer 1

.table-striped class 将斑马条纹添加到 table。因此，要覆盖相同的内容，您可以像这样将 !important 放入 CSS 中：

.private {
  background-color: #ff7f7f !important;
 }

这是一个Demo

.table .table-striped 比 .private 更具体。因此 .table-striped 的规则优先。

因此，您可以使用 !important 来覆盖它。 !important 值附加 CSS 属性值是自动获胜。它甚至覆盖标记中的内联样式。可以覆盖 !important 值的唯一方法是使用稍后在 CSS 中声明的另一个 !important 规则，否则具有相同或更大的特异性值。

Answer 2

#commenttable .private {
  background-color: #ff7f7f !important;
}

使用 CSS 以 ID 定位 table 内的特定 class - 更改 ROW 背景

Targeting specific class inside table with ID using CSS - Changing ROW background

html

css

php

background-color