在 div 中设置列表样式答案

【问题标题】：styling a list in a div在 div 中设置列表样式
【发布时间】：2019-11-23 16:49:36
【问题描述】：

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”

【问题讨论】：

您从哪里得到“data-cc-digits”DIV 中的一个或多个 INPUT 元素没有指定的 CSS”错误。 HTML 通常不会抛出错误

标签： html css

【解决方案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>

【讨论】：

我刚试过。但它仍然给我这个“data-cc-digits”DIV中的一个或多个INPUT元素没有指定的CSS。
但是，当你点击Run code snippet，你看到这个问题了吗？
它没有，每当我在他们的平台上运行它时，我都在处理编码挑战，它会给我上面的错误。
@oludamilareolukotun ，请注意 HTML 和 CSS 都发生了变化。 input 没有结束标签。
@oludamilareolukotun 已编辑 css，请检查。感谢我是极限

【解决方案2】：

由于@Nidhin Joseph 的回答（我没有 50 个代表，我无法发表评论）

输入白色你的意思背景？ background: white 要么文字白色？ color: white

***我添加了maxlength="4" 可能适合你的工作

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

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].other input {
  color: gray;
  font-size: 2em;
  line-height: 2em;
  border: none;
  background: white;
  margin: 0.5em;
}

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

【讨论】：

【解决方案3】：

像这样应用 css：

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

    }

【讨论】：