Question

我在一个页面中有20个输入，使用class属性设置为按钮（即在css中我定义边框，填充，宽度等）。

但我希望每个人都有不同的背景颜色。在我目前的CSS中，我有20个类（每个输入一个），它们是除了background-color之外的所有样式属性的副本。

这样工作正常，但我觉得有点不舒服重复代码。在那里有一个非常简单的方法来定义所有输入（边框，填充，宽度......）的大多数属性，然后指定背景颜色，每个输入一个？

Answer 1

HTML

<input type="text" class="btn red" value="Red">
<input type="text" class="btn green" value="green">
<input type="text" class="btn blue" value="blue">
<input type="text" class="btn black" value="black">
<input type="text" class="btn orange" value="orange">

CSS

.btn{
    border:1px solid grey;
    width:50px;
    height:10px;
    padding:10px;
    margin: 10px;    
}
.red{
    background-color:red;
}

.green{
    background-color:green;
}

.blue{
    background-color:blue;
}
.black{
    background-color:black;
    color:white;
}

.orange{
    background-color:orange;
}

以下是fiddle

Answer 2

您可以在元素上使用多个类，并在共享样式的元素上使用公共类，然后为特定于该元素的自定义样式使用不同的类（或id）。

e.g。

<强> HTML

<input type="text" class="input-class red" />
<input type="text" class="input-class green" />

<强> CSS

.input-class {
    margin: 0;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

您可以使用不同的选择器来定位所有文本输入，而不是使用公共类：

input[type="text"] { 
    margin: 0;
}

除上述内容外，您还可以创建更具体的选择器，如：

.input-class.red {
    background-color: red;
}

.input-class.green {
    background-color: green;
}

input[type="text"].red { 
    background-color: red;
}

input[type="text"].input-class.red { 
    background-color: red;
}

其中只会定位与这些选择器匹配的元素，这可能是有用的情况是您可能在其他地方有一个不希望受影响的同名的类。

例如，您可能已经：

.red {
    color: red
}

因此，您不希望红色背景上的红色文本输入，因此您可以将类选择器链接在一起以更具体。

Answer 3

就像你的“子类”：

.class {
    /* for <elem class="class"> only */
}
.class.subclass {
    /* for <elem class="class subclass"> only */
}

Answer 4

是否有一种非常简单的方法可以为所有人定义大多数属性输入（border，padding，width ...）然后指定背景颜色，每个输入一个？

首先，定义所有输入的样式，例如（或使用共享类等）：

input{
   border:...
   padding:...
}

然后，如果输入都是同一顶级父级的子级，则可以使用:nth-of-type选择器隔离特定的子级：

input:nth-of-type(1){   
  background-color:red;
}
input:nth-of-type(2){   
  background-color:blue;
}

或者，为每个人提供相关的班级名称

Answer 5

原生CSS中没有，但您有其他方法可以随意使用：

您可以定义一个公共类，它包含输入中常见的所有样式：

.my-inputs {
  border 1px solid #ccc;
  padding: 15px;
}

然后您可以根据需要修改

.my-inputs.city  {
    width: 100px;
}
.my-inputs.state {
    width: 50px;
}

因此，在您的标记中，您可以执行以下操作：

<input type="text" class="my-inputs state">

另一种方法是使用CSS预处理器，它可以让你能够进行类继承。看一下LESS和SASS的文档：

http://lesscss.org/

http://sass-lang.com/

CSS有类似“类子类”的东西吗？

5 个答案: