Question

我的代码看起来像这样：

＆＃13;

input{
...
}

label{
...
}

＆＃13;

<div class="textfield 1">
  <input tpye="text" id="fullname">
  <label for="fullname">Name</label>
</div>

<div class="textfield 2">
  <input tpye="text" id="fullname">
  <label for="fullname">Name</label>
</div>

<div class="textfield 3">
  <input tpye="text" id="fullname">
  <label for="fullname">Name</label>
</div>

＆＃13;

现在我想只在其中一个文本字段中应用css，因为代码可以很长时间地用于＆＃34; .textfield1＆＃34;我要问的每个css元素是否可以创建一个＆＃34;父类元素＆＃34;像：

＆＃13;

.textfield1{

    input{
    ...
    }

    label{
    ...
    }
       }

.textfield2{

    input{
    ...
    }

    label{
    ...
    }
       }

＆＃13;

将样式元素放在文件夹中。

有办法吗？

提前多多感谢！

Answer 1

您可以使用：

.textfield1 input {
    ...
}

.textfield1 label {
    ...
}

检查此链接是否有更多CSS选择器组合：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Answer 2

正如Turnip在评论中提到的那样，你不能在类名中有空格。因此，不要使用textfield 1这样的类名，而是让它们像textfield1一样 - 或者别的。目前，我正在使用textfield1来演示解决方案。

现在，您可以使用descendant selector .textfield1 input（注意类名和标记名称之间的空格）或child selector .textfield2 > input（注意箭头{{1在类名和标记名之间）指定给定的CSS规则必须仅适用于给定类的后代或子项。

input{
  border: 2px solid blue;
}

label{
  color: blue;
}

.textfield1 input {
  border: 2px solid red;
}

.textfield2 > input {
  border: 2px solid yellow;
}

Answer 3

如果你使用像Sass或Less这样的预处理器，你可以像你的例子一样禁止css。这是不可能的经典方式。

在css中：

.textfield2 input{
 ...
}

.textfield1 input{
 ...
}

.textfield1  label,  //<- if the label style of textfield1 and textefield2 are same
.textfield2  label{
 ...
}

请注意，在HTML中，textfield和数字<div class="textfield 3">之间有空格。这意味着你的div有CSS类 textfield 和 CSS类 3 。

如果你只想要一个类删除空格并且上面的代码可以工作。

如果您保留空格，只需将.textfield2修改为.textfield.2，并在 textfield 和数字之间加一个点（表示该样式它是类2）的类文本字段

CSS父类比其他CSS类

3 个答案: