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

问题描述：我在 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 链接在下面。谢谢！

标签： htmlcssattributes