Question

除了在名为skip的类中的文本输入之外，我无法弄清楚如何仅为文本输入着色。

<label for="name">Name (4 to 8 characters):</label>
<div class="skip">
  <input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">
</div>

<input type="text" id="name1" name="name" required minlength="4" maxlength="8" size="10">

Answer 1

使用:not() selector尝试类似的操作：

*:not(.skip) > input[type="text"] {
  color:red;
}

<body>
  <label for="name">Name (4 to 8 characters):</label>
  <div class="skip">
    <input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">
  </div>

  <input type="text" id="name1" name="name" required minlength="4" maxlength="8" size="10">
</body>

您还可以执行以下操作：

input[type="text"]{
  color:red;
}
.skip input[type="text"]{
  color:unset;
}

<body>
  <label for="name">Name (4 to 8 characters):</label>
  <div class="skip">
    <input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">
  </div>

  <input type="text" id="name1" name="name" required minlength="4" maxlength="8" size="10">
</body>

Answer 2

也许：

input[type="text"]{
    background: red;
}

.skip input[type="text"]{
    background: white;
}

 <label for="name">Name (4 to 8 characters):</label>
 <div class ="skip">
 <input type="text" id="name" name="name" required
   minlength="4" maxlength="8" size="10">
 </div>

 <input type="text" id="name1" name="name" required
   minlength="4" maxlength="8" size="10">

或

*:not(.skip)>input[type="text"]{
    background: red;
}

 <label for="name">Name (4 to 8 characters):</label>
 <div class ="skip">
 <input type="text" id="name" name="name" required
   minlength="4" maxlength="8" size="10">
 </div>

 <input type="text" id="name1" name="name" required
   minlength="4" maxlength="8" size="10">

Answer 3

您可以使用input：not（）伪类并将其应用于除跳过类之外的所有内容。

Answer 4

我建议将输入文本的颜色设置为红色的简单解决方案。然后还将跳过类的输入文本设置为默认颜色（如黑色）。像这样：

input[type=text] {
    color: red;
}

.skip input[type=text] {
    color: black;
}

Answer 5

如果我正确理解，您需要这样的东西：

body > input[type="text"] {
  background-color : #d1d1d1; 
}

您选择是正文子类型的文本输入。

Answer 6

您可以只使用类来标记每个类。因此，在输入中您要设为红色，只需使其类别为make-red：

.make-red {
  color: red;
}

<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

<input class="make-red" type="text" id="name1" name="name" required minlength="4" maxlength="8" size="10">

如果您想让所有（除了一个输入之外）为红色，只需给它一个“无红色”类并给出以下内容

* {
    color: red;
}
.no-red {
    color: black;
}

将输入文字颜色变为红色，但“跳过”类中的输入内容除外

6 个答案: