Question

如何选择CSS中每个“ Hello”之后的所有最后一条消息？

不使用JavaScript。

.my {
  text-align: right;
}

.my:last-of-type {
  color: red;
}

<p class="me">Hello</p>

<p class="my">message</p>
<p class="my">message</p>
<p class="my">message</p>
<p class="my">last message</p>

<p class="me">Hello</p>
<p class="me">Hello</p>

<p class="my">message</p>
<p class="my">message</p>
<p class="my">last message</p>

应为： image

Answer 1

我想我有一个解决方案，您需要扭转消息，然后CSS魔术才会发生：

<c:forEach items="${brandlist}" var="brand" begin="0" end="5"
    varStatus="loop">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1"
            name="brand"> <label class="custom-control-label" for="customCheck1">${brand.brand}</label>
    </div>
</c:forEach>

.chat-messages {
  display: flex;
  flex-direction: column-reverse;
}

.my {
  text-align: right;
}

.my:first-of-type, .me + .my {
  color: red;
}

Answer 2

您需要将每组.my消息包装在容器中以使用:last-of-type或对最后一条消息应用特定的修饰符类：

.my {
  text-align: right;
}

.my.last {
  color: red;
}

<p class="me">Hello</p>

<p class="my">message</p>
<p class="my">message</p>
<p class="my">message</p>
<p class="my last">last message</p>

<p class="me">Hello</p>
<p class="me">Hello</p>

<p class="my">message</p>
<p class="my">message</p>
<p class="my last">last message</p>

如何选择最后一个元素？

2 个答案: