多个相似的 css ID,简化?

multiple similar css IDs, simplification?

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

所有这些都非常相似,只是投影的背景图像不同。有没有办法简单点?

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

CSS:

.myClass{
    //your css
}

HTML:

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

使用属性以选择器开头:

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

更多关于attribute selector

.class{
 #blah
}

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

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

等等。

将所有相同的属性分组。class

例如,您可以这样做:

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