选择具有不同UL级和css的第二个元素

Question

我有下一个代码：

<div id="mainContainer">
  <ul>
    <li class="mainclass class1-1"> </li>
    <li class="mainclass class1-1"></li>
    <li class="mainclass active"></li>
    <li class="mainclass class1-2"></li>
    <li class="mainclass class1-2"></li>
  </ul>
</div>

我尝试用class1-2选择第二种类型，然后没有发生任何事情：

#mainContainer li[class~="class1-2"]:nth-of-type(2){right:1.7em;}

#mainContainer li[class~="class1-2"]:nth-of-type(2){right:1.7em;}
#mainContainer ul li[class~="class1-2"]:nth-of-type(2){right:1.7em;}

#mainContainer li[class*="-2"]:nth-of-type(2){right:1.7em;}
#mainContainer ul li[class*="-2"]:nth-of-type(2){right:1.7em;}

.mainclass.class1-2:nth-of-type(2){right:1.7em;}

是否存在一些css选择器指定这种情况？

Answer 1

我不相信你可以自己定位元素，但如果你只有.class1-2的2个元素，那么你可以使用以下内容：

.mainclass.class1-2 + .mainclass.class1-2 {
    right:1.7em;
}

请记住，这会影响其后直接使用相同类的其他元素。