使用 CSS 以 ID 定位表内的特定类 - 更改 ROW 背景答案

【问题标题】：Targeting specific class inside table with ID using CSS - Changing ROW background使用 CSS 以 ID 定位表内的特定类 - 更改 ROW 背景
【发布时间】：2016-11-06 18:37:50
【问题描述】：

我有一个如下所示的表格：

<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">，但没有用。所以现在我只是试图将“私人”类添加到该行并使用CSS 定位它，我认为我失败了。

这是CSS：

.private {
background-color: #ff7f7f;
}

我也试过了：

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

感谢任何帮助。

【问题讨论】：

试试这个#commenttable tbody tr .private { background-color: #ff7f7f; }
那行不通。我回应了 $row['commentPrivate'] 结果，它确实是“是”
您检查控制台是否有任何错误？或者可能是 CSS 被其他一些 CSS 覆盖了？
我在控制台中看不到任何错误。我唯一拥有的其他 CSS 是用于填充表格数据，仅此而已。
bootstraps table-striped 不应该覆盖它

标签： php html css background-color

【解决方案1】：

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

【讨论】：

【解决方案2】：

.table-striped 类将斑马条纹添加到表中。因此，要覆盖相同的内容，您可以将 !important 放入您的 CSS 中，如下所示：

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

这是Demo

.table .table-striped 比 .private 更具体。因此以.table-striped 的规则为准。

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

【讨论】：

成功了！非常感谢您的解释。附带说明一下，直到我删除了 table-responsive 和 table-hover 类，它才起作用，然后它就像一个魅力。知道为什么会这样吗？
它在我提供的演示中使用这些类。所以很难得出结论，可能是什么造成了这个问题。