html - 在 div 中设置列​​表样式

Question

div[data-cc-digits] {
  margin-top: 2em;
}

div[data-cc-digits][input] {
  color: white;
  font-size: 2em;
  line-height: 2em;
  border: none;
  background: none;
  margin-right: 0.5em;
}

<div data-cc-digits>
  <input type="text" size="4" placeholder="----"></input>
  <input type="text" size="4" placeholder="----"></input>
  <input type="text" size="4" placeholder="----"></input>
  <input type="text" size="4" placeholder="----"></input>
</div>
<!--closing for data-cc-digits-->

data-cc-digits DIV 的上边距应为 2em。 data-cc-digitsDIV 中的 INPUT 元素应为白色，字体大小和行高为 2em，无边框或背景，右边距为 0.5em；

我收到的错误格式为““data-cc-digits”DIV 中的一个或多个 INPUT 元素没有指定的 CSS”

Answer 1

试试下面的方法。您不需要放置 [input] 来访问子元素

div[data-cc-digits] {
  margin-top: 2em;
}

div[data-cc-digits] input {
  color: gray;
  font-size: 2em;
  line-height: 2em;
  border: none;
  background: none;
  margin-right: 0.5em;
}

<div data-cc-digits>
  <input type="text" size="4" placeholder="----" />
  <input type="text" size="4" placeholder="----" />
  <input type="text" size="4" placeholder="----" />
  <input type="text" size="4" placeholder="----" />
</div>