0

我有一种情况，我试图为三个不同的 div 元素更新 css，除了它们的 i 类标签（它们每个都有不同的图标）之外，它们都是相同的。我正在尝试更改每个颜色的颜色，我只能更改 css 或 javascript (Canvas LMS)。我可以更改所有这些，但我无法弄清楚粒度并单独更改每个。这三个是：

<div class="ic-notification ic-notification--admin-created ic-notification--info">
        <div class="ic-notification__icon" role="presentation">
          <i class="icon-info"></i>
          
  <div class="ic-notification ic-notification--admin-created ic-notification--info">
            <div class="ic-notification__icon" role="presentation">
              <i class="icon-calendar-month"></i>

 <div class="ic-notification ic-notification--admin-created ic-notification--info">
            <div class="ic-notification__icon" role="presentation">
              <i class="question"></i>

使用css或javascript有什么想法吗？

谢谢！

4

1 回答 1

0

有很多方法可以实现这一点，具体取决于您的整体需求，这里有一些简单的方法：

  • 选择图标中的班级；或者
  • Javascript（已编辑）

// select class
const icon = document.querySelector(".icon-info");
const calMonth = document.querySelector(".icon-calendar-month");
const question = document.querySelector(".question");

// Apply logic if need
// set color
icon.addEventListener('click', ()=> {
  icon.style.color = "blue";
})
calMonth.style.color = "red";
question.style.color = "green";
/* Use css to select icon class (if static) */
.icon-info {
  color: pink;
}

.icon-calendar-month {
  color: purple;
}

.question {
  color: yellow;
} 
<div class="ic-notification ic-notification--admin-created ic-notification--info">
        <div class="ic-notification__icon" role="presentation">
          <i class="icon-info">INFO - BLUE</i></div></div>
          
  <div class="ic-notification ic-notification--admin-created ic-notification--info">
            <div class="ic-notification__icon" role="presentation">
              <i class="icon-calendar-month">CALENDAR MONTH - RED</i></div></div>

 <div class="ic-notification ic-notification--admin-created ic-notification--info">
            <div class="ic-notification__icon" role="presentation">
              <i class="question">QUESTION - GREEN</i></div></div>

  • （从片段中删除的示例）：使用 :nth-child() 伪类（阅读更多）
于 2021-04-07T04:10:17.083 回答