CSS 属性未出现在文本输入中

Question

我试图让一些 css 属性出现在我的表单中，但是当我将这些属性移动到父 html 元素时它不起作用。直接应用于 .input 类的 CSS 属性起作用，但是当应用于父类 .form-control 时它们不起作用并且似乎不影响input 和 .form-control 属性是否出现在 Chrome 开发工具中，如果我检查文本输入元素？

.form-control {
  display: inline-block;
  height: 34px;
  width: 100%;
  margin: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}


/*.form-control .input {*/
/*height: 34px;*/
/*width: 100%;*/
/*margin: 10px;*/
/*border-radius: 4px;*/
/*border: 1px solid #ccc;*/
/*}*/

.form-control .button {
  display: block;
  background-color: limegreen;
  font-size: 14px;
  font-weight: 400;
  color: white;
  margin: auto;
  vertical-align: middle;
  padding: 6px 12px;
  border: 1px solid transparent;
  height: 25px;
  border-radius: 4px;
}

<form className="form-control">
  <input className="input" type="text" />
  <button className="button">Get Weather</button>
</form>

Answer 1

从您提供的代码片段来看，这是因为您将规则直接应用于表单而不是表单输入。输入不会继承您在表单上设置的属性。您需要像在注释掉的代码中那样专门针对输入。