html - 使用 CSS 指示元素组

Question

我有一个包含元素的无标题列表:

<ul>
    <li id="msg_0" data-user="usr_0">Message 0</li>
    <li id="msg_1" data-user="usr_1">Message 1</li>
    <li id="msg_2" data-user="usr_1">Message 2</li>
    <li id="msg_3" data-user="usr_2">Message 3</li>
    <li id="msg_4" data-user="usr_2">Message 4</li>
    <li id="msg_5" data-user="usr_2">Message 5</li>
    <li id="msg_6" data-user="usr_1">Message 6</li>
    <li id="msg_7" data-user="usr_1">Message 7</li>
    <li id="msg_8" data-user="usr_0">Message 8</li>
    <li id="msg_9" data-user="usr_0">Message 9</li>
</ul>

这样呈现:

有没有办法使用 CSS(3) 来指示来自相同用户的元素序列，例如给他们一些 margin 。像这样:

HTML 片段取自 Angular2 应用程序，因此也可以使用另一个属性(不同于“data-user”)。

usr_0、usr_1、usr_2... 是 ID，因此不能在 CSS 文件中进行硬编码。

Answer 1

使用属性选择器和相邻兄弟选择器。

[name="usr_0"] + [name="usr_0"], [name="usr_1"] + [name="usr_1"], [name="usr_2"] + [name="usr_2"] {
  margin-left: 15px;
}

<ul>
    <li id="msg_0" name="usr_0">Message 0</li>
    <li id="msg_1" name="usr_1">Message 1</li>
    <li id="msg_2" name="usr_1">Message 2</li>
    <li id="msg_3" name="usr_2">Message 3</li>
    <li id="msg_4" name="usr_2">Message 4</li>
    <li id="msg_5" name="usr_2">Message 5</li>
    <li id="msg_6" name="usr_1">Message 6</li>
    <li id="msg_7" name="usr_1">Message 7</li>
    <li id="msg_8" name="usr_0">Message 8</li>
    <li id="msg_9" name="usr_0">Message 9</li>
</ul>