多个相似的css ID，简化？

所有这些都非常相似，只是在投影的背景图像上有所不同。有没有简单的方法？

您可以将所有相同的属性偏移到一个CSS类中

CSS:

HTML:

---

使用属性以选择器开头：

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>

更多关于

等等

---

将该类中的所有相同属性分组。例如，您可以执行以下操作：

.class{
 #blah
}

#Focus-ST{
  background-image: url("img1.png");
}

#fiesta{
 background-image: url("img2.png");
}

.grid-breadcrumbs{/*common properties here*/}
.grid-breadcrumbs .focus-st{/*different properties for each case here*/}
.grid-breadcrumbs .f-150-EcoBoost{}
.grid-breadcrumbs .Mustang-EcoBoost{}
.grid-breadcrumbs .fiesta{}

您的html将如下所示：

.class{
 #blah
}

#Focus-ST{
  background-image: url("img1.png");
}

#fiesta{
 background-image: url("img2.png");
}

.grid-breadcrumbs{/*common properties here*/}
.grid-breadcrumbs .focus-st{/*different properties for each case here*/}
.grid-breadcrumbs .f-150-EcoBoost{}
.grid-breadcrumbs .Mustang-EcoBoost{}
.grid-breadcrumbs .fiesta{}

我用一个例子更新了我的答案。抱歉，html是什么样子的？

.grid-breadcrumbs{/*common properties here*/}
.grid-breadcrumbs .focus-st{/*different properties for each case here*/}
.grid-breadcrumbs .f-150-EcoBoost{}
.grid-breadcrumbs .Mustang-EcoBoost{}
.grid-breadcrumbs .fiesta{}

<div class="breadcrumb">
    <div class="grid-breadcrumbs focus-st"></div>
    <div class="grid-breadcrumbs fiesta"></div>
</div>