html - 我的样式表不适用于我的代码的某些部分

问题描述

嗨，所以我有一个简单的表格，下面有一个表格，其值来自一个数据库，当我尝试通过表格上的样式表应用样式时，它不适用。但是我为下面桌子上的按钮设置的样式正在应用。

这是我的代码：

<?php
include('SQLFunction.php');
?>

<html>
<head>
    <title>CreateTask</title>
    <meta http-equiv=content-type content="text/html; charset=utf-8">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet"/>
    <link href="css/bootstrap-grid.css" rel="stylesheet"/>
    <link href="css/bootstrap-reboot.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>
<body>
<span>
    <h1>New Task</h1>
    <form action="addTaskSubmit.php" method="POST" class="center" class="test">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Title: </label>
            <div class="col-sm-10">
                <input class="form-control" type="text" name="TaskTitle" maxlenght='50' required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Description:</label>
            <textarea style="width:70%" type="text" class="form-control rounded-0" name='TaskDesc' rows="10"
                      maxlength='1000' required></textarea>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Destination:</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" name="TaskDest" maxlength="150">
            </div>
            <label class="col-sm-2 col-form-label">Nextrun:</label>
            <div class="col-sm-10">
                <input class="form-control" type="datetime-local" name="TaskNextRun" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Cron:</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" name="TaskCron" maxlength="=50">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Enabled</label>
            <div class="col-sm-10">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="TaskEnabled" id="gridRadios1" value="true"
                           required>
                    <label class="form-check-label" for="gridRadios1">Yes</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="TaskEnabled" id="gridRadios1" value="false">
                    <label class="form-check-label" for="gridRadios1">No</label>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">parentTicket:</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" name="TaskParentTicket" maxlength="10">
            </div>
            <label class="col-sm-2 col-form-label">groupTicket:</label>
            <div class="col-sm-10">
                <input class="form-control" type="test" name="TaskGroupTicket" maxlength="150" required>
            </div>
            <label class="col-sm-2 col-form-label">lastCreatedTicket:</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" name="TaskLastCreatedTicket" maxlength="10">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-10">
                <button type="submit" name="addButton" class="btn btn-primary">Add</button>
            </div>
        </div>
    </form>
</span>

<h1>IT Task Main View</h1>
<?php
$sql = "SELECT TOP 15 *
    from dbo.SCHEDULE
    order by id desc";

//echo '<br>Sql :' .$sql.'<br>We will comment this out after testing<br>';

$link = connectMSDB();

$getResult = $link->prepare($sql);
$getResult->execute();
$result = $getResult->fetchAll(PDO::FETCH_BOTH);

echo "<div >";
echo "<table class=\"table table-hover\" style='width:85%; margin-left:auto; margin-right:auto;'>";
echo "<thead>";
echo "<tr>";
echo "<th>Action</th>";
echo "<th>Title</th>";
echo "<th>Description</th>";
echo "<th>Destination</th>";
echo "<th>Next Run</th>";
echo "<th>Cron</th>";
echo "<th>Enabled</th>";
echo "<th>Parent Ticket</th>";
echo "<th>Group Ticket</th>";
echo "<th>Last Created Ticket</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
foreach ($result as $row) {
    $desc = substr($row['description'], 0, 200);
    echo "<tr>";
    echo "<td><form action='UpdateTask.php' method='POST' onsubmit=''/><input type='hidden' name='q' value='" . $row['id'] . "'/>
                        <button type='submit' class=\"btn btn-update\" >Update</button></form>";

    echo "<form action='DeleteTask.php' method='POST' onsubmit=''/><input type='hidden' name='q' value='" . $row['id'] . "'/>
                        <button type='submit' class=\"btn btn-delete\" style=''>Delete</button></form></td>";
    echo "<td>{$row['title']}</td>";
    echo "<td>{$desc}</td>";
    echo "<td>{$row['destination']}</td>";
    echo "<td>{$row['nextrun']}</td>";
    echo "<td>{$row['cron']}</td>";
    echo "<td>{$row['enabled']}</td>";
    echo "<td>{$row['parentTicket']}</td>";
    echo "<td>{$row['groupTicket']}</td>";
    echo "<td>{$row['lastCreatedTicket']}</td>";
    echo "</tr>";
}
echo "</tbody>";
echo "</table>";
echo "</div>";

$link = null;
?>

<script src="js/bootstrap.bundle.js"></script>
</body>

</html>

这是我的样式表：

.btn-update {
    color:#004990;
    background-color: #F58020;
}

.btn-update:hover {
    background-color: #F8AA69;
    color: #3E5485
}

.btn-delete {
    color:#F58020;
    background-color:#004990;
}

.btn-delete:hover {
    background-color: #3E5485;
    color: #F8AA69;
}

.test{
    color: #FF0000;
}

所以类 bnt-update、btn-update:hover、btn-delete 和 btn-delete:hover 有效，但类测试无效。

奇怪的是，如果我直接在表单标签中添加样式，它会起作用吗？

我做错了什么？

谢谢您的帮助

标签： htmlcss

html - 我的样式表不适用于我的代码的某些部分

问题描述

解决方案

推荐阅读