时间戳

首页 > 解决方案 > 是否可以将具有相同属性值的元素组样式化在一起？

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

问题描述

我的应用程序的 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>

我想创建一些适用于具有相同作者的所有消息组的样式，例如隐藏.author子元素，除了最后一个子元素。

有没有办法使用 CSS 属性选择器或其他 CSS 功能来做到这一点？（是否可以在不更改 HTML 的情况下执行此操作）？

标签： htmlcsscss-selectors

解决方案

如果您知道要定位的作者姓名，则可以执行以下操作：

.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>

推荐阅读