這是我的html

.user-container div.user-left:last-child{
  color:red;
}
.user-container div.user-right:last-child{
  color:red;
}

<div class="user-container">
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text. this is user left last</div>
    <div class="user user-right">Some text.</div>
    <div class="user user-right">Some text.</div>
    <div class="user user-right">Some text.</div>
    <div class="user user-right">Some text. this is user right last</div>
</div>

您應(yīng)該將用戶左放入特定的容器中，從左到右放入用戶右

因為最后一個子選擇器只在父容器中工作:)

.left div:last-child {
  color:red;
}
.right div:last-child {
  color:red;
}

<div class="user-container">
  <div class="left">
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text.</div>
    <div class="user user-left">Some text. this is user left last</div>
  </div>
  <div class="right">
    <div class="user user-right">Some text.</div>
    <div class="user user-right">Some text.</div>
    <div class="user user-right">Some text.</div>
    <div class="user user-right">Some text. this is user right last</div>
  </div>
</div>

它不是最后一個子級，因為用戶權(quán)限div也是同一父級的子級。您想要的選擇器是:last-of-type，但這只對元素有效，對類無效。我覺得不改變html的結(jié)構(gòu)，用純CSS是不行的。另一個答案——使用n-last-child——只適用于您的示例。一旦添加或刪除任何元素，它就會中斷。

你可以在這里找到更多信息:CSS:怎么說。class:last-of-type[類，而不是元素！]

試試這個

.user-container div.user-left:nth-last-child(5) {
    background: red;
   }

使用css的:最后一個類型偽選擇器

。用戶左側(cè):最后一個類型， 。用戶權(quán)限:最后一個類型{ 顏色:紅色； }

試試這個: HTML部件:

<div class="user-container">
<ul>
<li>Some text.</li>
<li>Some text.</li>
<li>Some text.</li>
<li">Some text.</li>
<li class="lastLeft">Some text. this is user left last</li>
<li>Some text.</li>
<li>Some text.</li>
<li>Some text.</li>
<li class="lastRight">Some text. this is user right last</li></ul>
</div>

CSS部分:

.user-container ul li.lastRight {
color:red;
}
.user-container ul li.lastLeft {
color:red;
}

嘗試使用~ selector，:has和:not

.user-container > div.user-left:not(:has(~.user-left)) {
  color: red;
}

.user-container > div.user-right:not(:has(~.user-right)) {
  color: red;
}