使用 i 类标签更改 CSS答案

【问题标题】：Change CSS using i class tag使用 i 类标签更改 CSS
【发布时间】：2021-04-08 03:49:25
【问题描述】：

我有一种情况，我试图为三个不同的 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 的想法吗？

谢谢！

【问题讨论】：

有任何 ic-notification 类元素的父 div 吗？如果是，那么我们可以使用 css :nth-child(n) 属性，例如 .ic-notification:nth-child(1){...} 或 .ic-notification:nth-孩子(2) {...} .
元素的位置是可变的。这些是使用富文本编辑器创建的公告。

标签： html css canvas-lms

【解决方案1】：

根据您的整体需求，有很多方法可以实现，这里有一些简单的方法：

选择图标中的类；或
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>

（从 sn-p 中删除的示例）：使用 :nth-child() 伪类 (read more)

【讨论】：

谢谢，@Enrichdev。这让我更接近了。每个元素都有以下 css：ic-notification__icon { background: var(--ic-brand-primary); flex: 0 0 48px; position: relative; display: flex; justify-content: center; align-items: center; border-top-left-radius: 1px; border-bottom-left-radius: 1px; box-sizing: border-box; } .ic-notification { display: flex; border: 2px solid var(--ic-brand-primary); margin-bottom: 12px; box-shadow: 0 1px 6px rgb(0 0 0 / 20%); border-radius: 3px; box-sizing: border-box; }
元素的位置是可变的，所以我不确定第 n 个孩子是否会起作用。
@NodindeSaillan，Javascript 有帮助吗？不确定元素的可变性或所需的逻辑。我用一些简单的 JS 代码示例编辑了答案。如果对您有用，那就太好了。否则，我们需要更具体的细节。