我使用下面的CSS有一个背景图像列表ul li

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){ background-position: center; background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png); background-repeat: no-repeat; } <footer id="footer"> <div class="module"> <ul class="menu "> <li class="level1 item308 active current"></li> <li> </li> </ul> </div> <div class="module"> <ul class="menu "><li></li> <li></li> </ul> </div> <div class="module"> <ul class="menu "> <li></li> <li></li> </ul> </div> </footer>

一个快速的脏jQuery解决方案，用于标记具有相同类名的一组元素中的第一个和最后一个元素:

$('.my-selector').each(function(index, item) { if (!$(item).next().hasClass('my-selector')) { $(item).addClass('last'); } if (!$(item).prev().hasClass('my-selector')) { $(item).addClass('first'); } }); .my-selector { padding: 5px; background: #ccc; } .my-selector.first { background: #fcc; } .my-selector.last { background: #cfc; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span>first element...</span> <div class="my-selector">Row 1</div> <div class="my-selector">Row 2</div> <div class="my-selector">Row 3</div> <div class="my-selector">Row 4</div> <span>other elements...</span> <div class="my-selector">Row 3</div> <div class="my-selector">Row 4</div> </div>

我很惊讶没有人提到最干净的解决方案:

r:没有。红色~ .红色){ 边框:1px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >

我的项目里就有这个。

Div > .b ~ .b:not(:第一个孩子){ 背景:无; ｝ Div > .b { 背景:红色; ｝ < div > <p class="a">第一段 <p class="a">第二段 <p class="b">第三段 <p class="b">第四段 < / div >

下面的代码肯定在任何地方都能正常工作。 它简单而简短。

<div class="home">
    <span>blah</span>
    <p class="blue"> first-blue  </p>
    <p class="blue"> second-blue </p>
    <p class="blue"> third-blue  </p>

    <p class="red">  first-red   </p>
    <p class="red">  second-red  </p>
    <p class="red">  third-red   </p>
    <p class="red">  fourth-red  </p>

    <p class="pink"> first-pink  </p>
    <p class="pink"> second-pink </p>

    <p class="red">  new-first-red   </p>
    <p class="red">  new-second-red  </p>
</div>

我们可以选择第一个红色:

.home .red:not(.home .red ~ .red) {
    background-color: blue;
}

如果你想选择new-first-red，你应该使用+而不是~。

你可以使用first-of-type或n -of-type(1)

r { 颜色:绿色; ｝ /* .red:n -of-type(1) */ r: first-of-type { 颜色:红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >