多个相似的CSS ID，简化？

问题描述：

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

所有这些都非常相似，只有在背景图像投影。有没有简单的方法？多个相似的CSS ID，简化？

答

例如，你可以做这样的事情：

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

html会是什么样子？ – easymoden00b 2015-01-26 19:44:35

我编辑了包含html部分的响应。 – 2015-01-26 20:03:40

答

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

CSS：

.myClass{ 
    //your css 
}

HTML：

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

例如陈健波青睐。 – easymoden00b 2015-01-26 19:34:51

我用一个例子更新了我的答案。对不起， – 2015-01-26 19:35:34

答

使用属性开始选择：

[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属性

多个相似的CSS ID，简化？

相关推荐