区分数独中的默认输入和用户输入 HTML

Question

我正在参加我的第一门网络编程课程，但讲师帮不上什么忙。在过去一周试图联系他之后，我决定通过网络寻找帮助和指导。我的问题是：如何区分编程的数独数字和用户需要填写的空单元格？最好，我想让已编程的单元格具有灰色背景，而空单元格则没有格式。

目前在我的 css 文件中我有这个：

table {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
text-align: center;
border-collapse: collapse;
}

td {
    border: 1px solid #000;
    width: 40px;
    height: 40px;
}

tr:nth-child(1) td{
    border-top-width: 3px;
}

td:nth-child(1) {
    border-left-width: 3px;
}

td:nth-child(3), td:nth-child(6), td:nth-child(9){
    border-right-width: 3px;

}

tr:nth-child(3) td, tr:nth-child(6) td, tr:nth-child(9) td{
    border-bottom-width: 3px;
}

这是我的 html 文件（不是最终格式，但提供了一个想法）：

<!DOCTYPE html>

<head>

    <link rel="stylesheet" href="style1.css">
</head>

<body>
    <table>
        <tr>
            <td>Start Timer</td>
            <td>Reset Timer </td>
            <td>Timer:_________.</td>
    </table>
    <table>
        <tr>
            <td>2</td>
            <td></td>
            <td>8</td>
            <td>3</td>
            <td></td>
            <td>5</td>
            <td>7</td>
            <td>1</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>7</td>
            <td>1</td>
            <td></td>
            <td>2</td>
            <td>8</td>
            <td></td>
            <td>4</td>
            <td></td>
        </tr>
        <tr>
            <td>9</td>
            <td></td>
            <td></td>
            <td>7</td>
            <td></td>
            <td>1</td>
            <td>5</td>
            <td>8</td>
            <td></td>
        </tr>
        <tr>
            <td>6</td>
            <td>8</td>
            <td></td>
            <td>5</td>
            <td>3</td>
            <td></td>
            <td>1</td>
            <td>7</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td></td>
            <td>9</td>
            <td></td>
            <td></td>
            <td></td>
            <td>6</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>1</td>
            <td>4</td>
            <td></td>
            <td>6</td>
            <td></td>
            <td>9</td>
            <td></td>
            <td>3</td>
        </tr>
        <tr>
            <td></td>
            <td>6</td>
            <td>3</td>
            <td></td>
            <td>1</td>
            <td>7</td>
            <td>2</td>
            <td>9</td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td>9</td>
            <td></td>
            <td>2</td>
            <td>8</td>
            <td>6</td>
            <td></td>
            <td>3</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>2</td>
            <td></td>
            <td>9</td>
            <td></td>
            <td>3</td>
            <td>8</td>
            <td>6</td>
            <td></td>
        </tr>
    </table>

</body>

</html>

编辑所以我将它添加到我的 CSS 文件中，它确实有效，但我不明白为什么。这个推荐吗。我知道我的问题可能有一些解决方案，但这是一个实际的解决方案，还是我很幸运我的项目正在运行。

td {
    border: 1px solid #000;
    width: 40px;
    height: 40px;
    background-color: gray;
    font-weight: bold;
    empty-cells:
}

td:empty {
    background-color: transparent;
}

Answer 1

添加 2 class 到 td 填充和清空如果单元格已填充，请向其添加 class "fill"

td.fill{
    background: #000;
}
td.empty{
    background: transparent;
}

区分数独中的默认输入和用户输入 HTML

Distinguish Between Default and User Input in Sudoku HTML

html

css

sudoku

web