使用 i class 标签更改 CSS

问题描述

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

谢谢！

解决方法

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

选择图标中的类；或
Javascript（已编辑）

template<class CRTP>
struct base_to_A{
    operator A()  const{
        return static_cast<CRTP const&>(*this).to_A() ;
    }
};

class C : public base_to_A<C>{
    A to_A() const{return A{};}
    B to_B() const{return B{};}
public:
    operator B() const{return to_B();}
};

public/protected/private

// 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";

（从代码片段中删除的示例）：使用 :nth-child() 伪类 (read more)

canvas-lms html