如何解决使用 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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。