由于某些原因,我在我的HTML代码中有类似的东西
id = 1
<li class="anyclass" ></li>
<li class="firstclasname + id" ></li>
<li class="scondclasname + id" ></li>
<li class="thirdclasname + id ></li>
<li class="forthclasname + id" ></li>
<li class="fifthclasname + id" ></li>
</ul>
id = 2
<li class="anyclass" ></li>
<li class="firstclasname + id" ></li>
<li class="scondclasname + id" ></li>
<li class="thirdclasname + id ></li>
<li class="forthclasname + id" ></li>
<li class="fifthclasname + id" ></li>
</ul>
我可以只为这段代码创建一个css文件包含这样的内容:
.every first calss name + what ever id {
background-image: url('/image/facebook.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -277px -446px;
}
答案 0 :(得分:0)
对于这样的情况,我喜欢使用两个选择器 - 一个与所有项目相关的常用选择器,以及一个用于识别单个项目的特定选择器。
使用示例如下:
<ul class="contact-list">
<li class="item item-1">Contact 1</li>
<li class="item item-2">Contact 2</li>
<li class="item item-3">Contact 3</li>
</ul>
在CSS中,您可以定位列表本身,所有项目或一个特定项目。
修改强>
道歉,我浏览了你的问题并错过了关于id = 1和id = 2的部分。根据将要识别的ID数量以及是否知道这些ID,有几个不同的选项。
对于已知ID的简短列表,您可以像我提到的那样定位各个项目。如果存在未知数量的ID(或ID本身未知),您可以考虑使用nth-child
选择器。
这完全取决于您尝试实现的效果,在您的问题中并未详细说明,但一些常用的(在我上面的示例标记的上下文中)如下:
.contact-list:nth-child(odd)
适用于每个奇数元素,即1st,3rd,5th .contact-list:nth-child(even)
适用于每个偶数元素,即第2,第4,第6 .contact-list:nth-child(1)
仅适用于第一个元素.contact-list:nth-child(4n+4)
适用于每个第四个元素等等。最常见的要求之前已经完成了一千次,并且可以通过快速谷歌搜索找到&#34; CSS每一秒元素&#34;。
答案 1 :(得分:0)
你只需要尝试CSS3属性的nth-child。
ul.yourClass li.firstclasname:nth-child(2){
background:url('/image/facebook.png') -277px -446px no-repeat;
background-size:auto;
}
答案 2 :(得分:0)
您可以使用带有[attr^=value]
属性选择器的开头。
li[class^="firstclasname"] {
background: blue;
}
&#13;
<ul>
<li class="anyclass"></li>
<li class="firstclasname1"></li>
<li class="scondclasname1"></li>
<li class="thirdclasname1"></li>
<li class="forthclasname1"></li>
<li class="fifthclasname1"></li>
</ul>
<ul>
<li class="anyclass"></li>
<li class="firstclasname2"></li>
<li class="scondclasname2"></li>
<li class="thirdclasname2"></li>
<li class="forthclasname2"></li>
<li class="fifthclasname2"></li>
</ul>
&#13;