#grid-breadcrumbs-Focus-ST{
...
}
#grid-breadcrumbs-F-150-EcoBoost{
...
}
#grid-breadcrumbs-Mustang-EcoBoost{
...
}
#grid-breadcrumbs-fiesta{
...
}
所有这些都非常相似,仅在投影的背景图像上有所不同。有办法简单吗?
答案 0 :(得分:4)
使用属性start with selector:
[id^="grid-breadcrumbs"]{
/* Represents an element with an attribute name of attr
and whose value is prefixed by "value".*/
}
答案 1 :(得分:2)
您可以将所有相同的属性偏移到CSS类中。
CSS:
.myClass{
//your css
}
HTML:
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
答案 2 :(得分:1)
例如,您可以这样做:
.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>
答案 3 :(得分:0)
.class{
#blah
}
#Focus-ST{
background-image: url("img1.png");
}
#fiesta{
background-image: url("img2.png");
}
等等。
将.class
中的所有相同属性分组