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

时间:2016-07-05 03:17:24

标签: php html css background-color

我有一个看起来像这样的表:

<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">无法正常工作。所以现在我只是尝试将类'private'添加到行并使用CSS来定位它,我认为我失败了。

这是css:

.private {
background-color: #ff7f7f;
}

我也试过了:

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

感谢任何帮助。

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:2)

switch类将斑马条纹添加到表格中。因此,为了覆盖相同的内容,您可以将.table-striped放在CSS中,如下所示:

!important

这是Demo

.private { background-color: #ff7f7f !important; } .table .table-striped更具体。因此,.private的规则占优势。

enter image description here

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