多个相似的 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".*/
}
.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>
#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".*/
}
.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>