CSS 父类优于其他 CSS 类答案

【问题标题】：CSS Parent Class over other CSS ClassesCSS 父类优于其他 CSS 类
【发布时间】：2017-11-10 12:56:52
【问题描述】：

我的代码看起来像这样：

input{
...
}

label{
...
}

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

现在我只想在其中一个文本字段上应用 css，并且因为代码很长，所以要向每个 css 元素添加一个“.textfield1”我想问我是否可以创建一个“父类元素”，例如：

.textfield1{

    input{
    ...
    }

    label{
    ...
    }
       }

.textfield2{

    input{
    ...
    }

    label{
    ...
    }
       }

这就像将样式化的元素放在一个文件夹中。

有没有办法做到这一点？

提前非常感谢！

【问题讨论】：

CSS 编号SCSS 是的。但是无论如何，您的选择器都是错误的。应该是.textField.1。当然，classes can not start with a number 除外，所以你的无效。如果您只想设置一个元素的样式，为什么需要为每个元素添加一个类？您的问题不清楚。

标签： css class styles element parent

【解决方案1】：

你可以使用：

.textfield1 input {
    ...
}

.textfield1 label {
    ...
}

查看此链接了解更多 CSS 选择器组合：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

【讨论】：

【解决方案2】：

正如 Turnip 在 cmets 中提到的，类名中不能有空格。因此，您可以使用textfield1 或其他名称，而不是使用textfield 1 之类的类名。我暂时使用textfield1来演示解决方案。

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

input{
  border: 2px solid blue;
}

label{
  color: blue;
}

.textfield1 input {
  border: 2px solid red;
}

.textfield2 > input {
  border: 2px solid yellow;
}

<div class="textfield1">
  <input tpye="text" id="fullname">
  <label for="fullname">Name</label>
</div>

<div class="textfield2">
  <input tpye="text" id="fullname">
  <label for="fullname">Name</label>
</div>

<div class="textfield3">
  <input tpye="text" id="fullname">
  <label for="fullname">Name</label>
</div>

【讨论】：

【解决方案3】：

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

在css中：

.textfield2 input{
 ...
}

.textfield1 input{
 ...
}

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

请注意，在您的 HTML 中，文本字段和数字 <div class="textfield 3"> 之间有一个空格。这意味着您的 div 具有 CSS 类 textfield 和 CSS 类 3。

如果你只想要一个类，去掉空格，上面的代码就可以了。

如果你保留空格，只需将.textfield2 修改为.textfield.2，在textfield 和number 之间加一个点（表示它的类的样式具有类 2) 的文本字段

【讨论】：