只使用

.home > .red ~ .red{
 border: 1px solid 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 >

你可以试试这样做吗:

.red:first-of-type {
    border: 5px solid red;
}

你也可以在最后一个元素上使用this(如果你需要的话):

.red:last-of-type {
    border: 5px solid red;
}

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

<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，你应该使用+而不是~。

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

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

我使用下面的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>