PHP条件CSS异常：仅最后一条高优先级记录显示红色求助

问题描述 #

尝试通过PHP动态为MySQL数据库mensajes表中prioridad（优先级）为1的表格行添加Bootstrap的text-danger类，使文本显示红色。HTML输出显示符合条件的行都已正确添加该类，但页面仅最后一条符合条件的记录文本显示红色，其余均未生效。

相关代码 #

PHP代码 #

<?php
    include 'connect.php';
?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="refresh" content="10">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

    <title>Lista de mensajes</title>
</head>
<body>
    <div class="container-fluid mb-10">


        <table class="table table-striped fs-2">
            <thead class="text-uppercase">
                <tr>
                <th scope="col"  class="col-sm-2">fecha</th>
                <th scope="col">mensaje</th>
                <th scope="col" class="col-sm-1">prioridad</th>
                </tr>
            </thead>
            <tbody>

                <?php

                    $sql="SELECT * FROM mensajes WHERE 1 ORDER BY prioridad DESC,fecha DESC";

                    $resultado=mysqli_query($con,$sql);


                    while($row=mysqli_fetch_assoc($resultado)){
                        $id=$row['id'];
                        $hotel=$row['hotel'];
                        $mensaje=$row['mensaje'];
                        $fecha=new datetime($row['fecha']);
                        $fecha=$fecha->format('d-m-y H:i:s');
                        $prioridad=$row['prioridad'];
                        if($prioridad==true){
                            echo '<tr class="text-danger">';
                        }else{
                            echo '<tr>';
                        }
                        
                        echo '<td scope="row">'.$fecha.'</td>
                        <td>'.$hotel." - ".$mensaje.'</td>
                        <td>'.$prioridad.'</td>
                        </tr>';
                    }

                ?>

                
                    
            </tbody>
        </table>
        

        <?php
            if(!mysqli_close($con)){
                die(mysqli_error());
            }
        ?>
    </div>
</body>
</html>

页面输出的HTML代码 #

<table class="table table-striped fs-2">
        <thead class="text-uppercase">
            <tr>
            <th scope="col"  class="col-sm-2">fecha</th>
            <th scope="col">mensaje</th>
            <th scope="col" class="col-sm-1">prioridad</th>
            </tr>
        </thead>
        <tbody>

            <tr class="text-danger"><td scope="row">23-10-22 10:58:54</td>
                    <td>PLB - rojo OOOO?</td>
                    <td>1</td>
                    </tr><tr class="text-danger"><td scope="row">23-10-22 08:58:02</td>
                    <td>BPC - BPC y prioridad</td>
                    <td>1</td>
                    </tr><tr><td scope="row">24-10-22 08:01:54</td>
                    <td>BPK - TEST</td>
                    <td>0</td>
                    </tr><tr><td scope="row">23-10-22 10:26:29</td>
                    <td>BGA - Prueba BGA con prioridad</td>
                    <td>0</td>
                    </tr>
            
               
        </tbody>
    </table>

问题根源 #

从输出的HTML可以确认，所有优先级为1的行都正确添加了text-danger类，但样式未生效的原因是Bootstrap的table-striped类样式优先级更高。

Bootstrap的table-striped通过:nth-child(odd)/:nth-child(even)伪类为表格行设置文本颜色和背景色，这些伪类选择器的优先级高于直接添加的text-danger类，导致前面的行文本颜色被覆盖，仅最后一行因渲染顺序巧合生效。

解决方案 #

方案1：提高text-danger的样式优先级 #

在页面<head>中添加自定义CSS，增强text-danger的权重：

.table tr.text-danger td {
    color: #dc3545 !important; /* 使用Bootstrap text-danger默认颜色值，通过!important强制覆盖原有样式 */
}

方案2：替换原生table-striped为自定义条纹样式 #

若不想使用!important，可以移除表格的table-striped类，自行实现条纹效果：

.table-custom-striped tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.05); /* 匹配Bootstrap原生条纹背景色 */
}

同时修改表格的class属性：

<table class="table table-custom-striped fs-2">

内容的提问来源于stack exchange，提问作者Miguecadiz