为什么我的属性选择器不会覆盖我以前的组合器选择器？

Question

问题描述：我在 HTML 中设置了一些表单字段。我使用组合器将这些块设置为 display:block，以便它们垂直堆叠在一起。

.signup-form label,
.signup-form select,
.signup-form input {
  display: block;
  width: 40%;
}

后来，我决定使用属性选择器将它们改为 display:inline-block。

.signup-form input[id="agree-terms"],
.signup-form input[for="agree-terms"] {
  display: inline-block;
  width: auto;

这并没有成功地将元素更改为内联块，我不知道为什么。我的 codepen 链接在下面。谢谢！

https://codepen.io/NFuego24-7/pen/BaLGWRb