Селектор дочерних и родительских элементов CSS

В настоящее время я работаю над игрой 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;

}

Все изменения произошли. Почему так случилось? И спасибо участникам.