CSS子级和父级选择器

Question

我目前正在从事Connect 4游戏，该游戏的棋盘设置为带有td中按钮的表格。

    <table class="board">
        <tr>
            <td><button type="button"></button> </td>
            <td><button type="button"></button> </td>
            <td><button type="button"></button> </td>
            <td><button type="button"></button> </td>
            <td><button type="button"></button> </td>
            <td><button type="button"></button> </td>
            <td><button type="button"></button> </td>
        </tr>

我想出了问题的答案，但我需要知道的是为什么我得到了答案。

当尝试编辑按钮时，最初我的CSS是这样的：

button {
   height: 100px;
   width: 100px;
   border-radius: 50%;
   margin: 1px;
   border: 1px solid black;

}

高度，宽度和边界发生了变化，但边界半径和边距没有变化。

但是，当我将CSS更改为此：

.board button {
   height: 100px;
   width: 100px;
   border-radius: 50%;
   margin: 1px;
   border: 1px solid black;

}

发生所有更改。为什么会这样呢？并感谢贡献者。