Question

由于某些原因，我在我的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; }

Answer 1

对于这样的情况，我喜欢使用两个选择器 - 一个与所有项目相关的常用选择器，以及一个用于识别单个项目的特定选择器。

使用示例如下：

<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;。

Answer 2

你只需要尝试CSS3属性的nth-child。

ul.yourClass li.firstclasname:nth-child(2){ 
   background:url('/image/facebook.png') -277px -446px no-repeat;
   background-size:auto;

}

Answer 3

您可以使用带有[attr^=value]属性选择器的开头。

＆＃13;

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;

如何使用一个具有许多元素的类？

3 个答案: