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>

Answer 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>

Answer 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;

    }

在div中设置列表样式

3 个答案: