Question

我在故障单中有一个消息列表，但在消息之间我可能会显示一些故障单活动（如“故障单关闭”，“状态已更改”......）。

我的基本HTML票证及其消息是：

<p class="ticket-message">My message</p>
<p class="ticket-message">Another message</p>
<p class="ticket-message">Third message message</p>

如果邮件有任何活动，HTML可能如下所示：

<p class="ticket-message">My message</p>
<p class="ticket-activity">Activity</p>
<p class="ticket-activity">Another activity</p>
<p class="ticket-message">Another message</p>
<p class="ticket-activity">Some activity here</p>
<p class="ticket-message">Third message message</p>

如果在另一个故障单活动之后列出了故障单活动，我想为它添加一些特殊的CSS（比如减少第一个项目底部的边距）。

示例：

<p class="ticket-message">My message</p>
<p class="ticket-activity">Activity</p> <== A ticket-activity is listed after this item, add special CSS for this item only
<p class="ticket-activity">Another activity</p>
<p class="ticket-message">Another message</p>
<p class="ticket-activity">Some activity here</p> <== This ticket-activity is listed by itself (no ticket-activity after this item), so no special CSS is needed here
<p class="ticket-message">Third message message</p>

是否可以做这样的事情？

我尝试过使用.ticket-activity + .ticket-activity，但它没有给我我需要的结果。

更新我已经添加了我拥有的CSS以及我想要完成的任务：

.ticket-message, .ticket-activity {
    padding: 15px;
    margin-bottom: 15px;
}

/* This CSS should only be applied to items that are followed by another .ticket-activity as per my example above */
.ticket-activity + .ticket-activity {
    margin-bottom: 3px;
}

/* Some custom classes like changing color on .ticket-activity */
/* ... */

更新＃2 这就是我想要实现的（这只是在带有内联样式的DOM中完成的）：https://i.imgur.com/gKnX19j.png

Answer 1

这似乎非常接近你的形象：

    (edm)bash-3.2$ ipython
WARNING: Readline services not available or not loaded.
WARNING: The auto-indent feature requires the readline library
Python 2.7.11 |Enthought, Inc. (x86_64)| (default, Jun 23 2016, 03:30:25) 
Type "copyright", "credits" or "license" for more information.

IPython 4.1.2 -- An enhanced Interactive Python.
?         -> Introduction and overview of IPython's features.
%quickref -> Quick reference.
help      -> Python's own help system.
object?   -> Details about 'object', use 'object??' for extra details.

.ticket-message, .ticket-activity {
    padding: 15px;
    margin-bottom: 15px;
    background: #f2f2f2;
}

.ticket-activity {
  margin-top: 0;
  margin-bottom: 3px;
}

Answer 2

您可以根据第一个元素选择第二个元素，但不能选择其他方式。

考虑使用顶部边距而不是底部边距。

彼此列出的元素的特殊CSS

2 个答案: