Question

这是我的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>

有没有办法使用CSS更改“user-left”类和“user-right”类的最后一个孩子的字体颜色？在这里用户权利：最后一个孩子工作，但用户离开：最后一个孩子不工作。任何想法？

Answer 1

您应将用户左侧封闭到特定容器left中，并将用户右侧封闭到right

因为last-child选择器仅在父容器中起作用：）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

它不是最后一个孩子，因为用户权利div也是同一父母的孩子。你想要的选择器是：last-of-type但它只适用于元素，而不适用于类。我不认为你可以在纯CSS中做到这一点而不改变html结构。另一个答案 - 使用nth-last-child - 仅适用于您的示例。一旦添加或删除任何元素，它就会中断。

您可以在此处找到更多信息：CSS: How to say .class:last-of-type [classes, not elements!]

Answer 3

试试这个

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

Answer 4

使用css的:last-of-type伪选择器

.user-left:last-of-type, .user-right:last-of-type { color: red; }

Answer 5

尝试一下： 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 PART：

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

如何使用特定类更改最后一个元素的字体颜色

5 个答案: