Question

#grid-breadcrumbs-Focus-ST{
  ...
}
#grid-breadcrumbs-F-150-EcoBoost{
  ...
}
#grid-breadcrumbs-Mustang-EcoBoost{
  ...
}
#grid-breadcrumbs-fiesta{
  ...
}

所有这些都非常相似，仅在投影的背景图像上有所不同。有办法简单吗？

Answer 1

使用属性start with selector：

[id^="grid-breadcrumbs"]{
  /* Represents an element with an attribute name of attr 
    and whose value is prefixed by "value".*/
}

更多关于attribute selector

Answer 2

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

CSS：

.myClass{
    //your css
}

HTML：

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

Answer 3

例如，您可以这样做：

.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会是这样的：

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

Answer 4

.class{
 #blah
}

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

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

等等。

将.class

中的所有相同属性分组

多个类似的CSS ID，简化？

4 个答案: