Question

我正在构建一个聊天应用程序，该应用程序应该易于设置样式。

聊天当前创建的HTML如下所示：

<div class="chat">
  <div class="message" data-author="Alice">
    <div class="content">Hello Bob!<div>
    <div class="author">Alice</div>
  </div>

  <div class="message" data-author="Alice">
    <div class="content">How are you today?<div>
    <div class="author">Alice</div>
  </div>

  <div class="message" data-author="Alice">
    <div class="content">I am doing great myself!<div>
    <div class="author">Alice</div>
  </div>


  <div class="message" data-author="Bob">
    <div class="content">Hey Alice!<div>
    <div class="author">Bob</div>
  </div>


  <div class="message" data-author="Bob">
    <div class="content">Nice hearing from you :-)<div>
    <div class="author">Bob</div>
  </div>
</div>

现在，我想创建一种样式，该样式适用于所有具有相同作者的邮件的 group ，例如隐藏.author子元素，但最后一个-孩子。

有没有办法使用例如CSS属性选择器或其他CSS功能？（是否可以在不更改HTML的情况下执行？

Answer 1

是的，您可以看到以下代码段：

.message[data-author="Bob"]{
   color:red;
}
.message[data-author="Alice"]{
   color:green;
}

<div class="chat">
  <div class="message" data-author="Alice">
    <div class="content">Hello Bob!<div>
    <div class="author">Alice</div>
  </div>

  <div class="message" data-author="Alice">
    <div class="content">How are you today?<div>
    <div class="author">Alice</div>
  </div>

  <div class="message" data-author="Alice">
    <div class="content">I am doing great myself!<div>
    <div class="author">Alice</div>
  </div>


  <div class="message" data-author="Bob">
    <div class="content">Hey Alice!<div>
    <div class="author">Bob</div>
  </div>


  <div class="message" data-author="Bob">
    <div class="content">Nice hearing from you :-)<div>
    <div class="author">Bob</div>
  </div>
</div>

是否可以将具有相同属性值的CSS样式的元素组组合在一起？

1 个答案: