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

tgabmvqs  于 2023-06-07  发布在  其他
关注(0)|答案(6)|浏览(347)

这是我的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'类的最后一个子类的字体颜色?在这里,user-right:last-child工作,但user-left:last-child不工作。有什么想法吗?

klsxnrf1

klsxnrf11#

应该将user-left封装到特定容器left中,user-right封装到right
因为last-child选择器只在父容器中工作:)

.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>
8wtpewkr

8wtpewkr2#

它不是最后一个子元素,因为用户权限div也是同一父元素的子元素。你想要的选择器是:last-of-type,但它只对元素起作用,而不是按类。我不认为你可以在纯CSS中做到这一点,而不改变HTML结构。另一个答案--使用nth-last-child --只适用于您的示例。只要添加或删除任何元素,它就会中断。
您可以在这里找到更多信息:CSS: How to say .class:last-of-type [classes, not elements!]

vwhgwdsa

vwhgwdsa3#

试试这个

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

dl5txlt94#

使用css的:last-of-type伪选择器
.user-left:last-of-type, .user-right:last-of-type { color: red; }

rqenqsqc

rqenqsqc5#

试试这个: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;
}
yacmzcpb

yacmzcpb6#

尝试使用~选择器、:has:not

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

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

相关问题