这是我的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不工作。有什么想法吗?
6条答案
按热度按时间klsxnrf11#
应该将user-left封装到特定容器
left
中,user-right封装到right
中因为last-child选择器只在父容器中工作:)
8wtpewkr2#
它不是最后一个子元素,因为用户权限div也是同一父元素的子元素。你想要的选择器是:last-of-type,但它只对元素起作用,而不是按类。我不认为你可以在纯CSS中做到这一点,而不改变HTML结构。另一个答案--使用nth-last-child --只适用于您的示例。只要添加或删除任何元素,它就会中断。
您可以在这里找到更多信息:CSS: How to say .class:last-of-type [classes, not elements!]
vwhgwdsa3#
试试这个
dl5txlt94#
使用css的
:last-of-type
伪选择器.user-left:last-of-type, .user-right:last-of-type { color: red; }
rqenqsqc5#
试试这个:HTML部分:
CSS部分:
yacmzcpb6#
尝试使用~选择器、:has和:not