如何为basicLightbox中特定图片单独设置CSS样式并切换回原样式

核心思路：给目标图片的弹出层添加自定义类，再通过CSS针对性覆盖样式 #

1. 给目标图片的触发元素做标识
   给需要特殊处理的图片触发按钮（比如<a>或<img>）添加区分标识，比如针对dad.jpg，给对应的触发元素加data-special="narrow-img"，或者直接通过图片文件名判断。

2. 初始化lightbox时动态添加自定义类
   在创建basicLightbox实例时，判断当前触发的是否是目标图片，给弹出层添加自定义类：

// 遍历所有图片触发元素
document.querySelectorAll('a[data-src]').forEach(trigger => {
  trigger.addEventListener('click', e => {
    e.preventDefault();
    const imgSrc = trigger.getAttribute('data-src');
    // 判断是否是需要特殊处理的窄图
    const isNarrowImg = imgSrc.includes('dad.jpg');
    // 配置lightbox选项，添加自定义类
    const lightboxOpts = isNarrowImg ? { className: 'narrow-img-lightbox' } : {};
    // 创建并显示lightbox
    const lightbox = basicLightbox.create(`<img src="${imgSrc}">`, lightboxOpts);
    lightbox.show();
  });
});

3. 编写优先级足够的CSS样式
   直接在现有样式文件中添加以下代码，覆盖目标图片的max-height：

/* 用更具体的选择器提高优先级，无需!important */
.basicLightbox.narrow-img-lightbox .basicLightbox__placeholder img {
  max-height: 75%;
}

如果默认样式的优先级极高，也可以临时用!important兜底，但更推荐用具体选择器的方式保证样式稳定性。

为什么内联样式无效？ #

basicLightbox会将你传入的<img>嵌入到它自带的容器结构中，默认CSS可能使用了更具体的选择器（比如.basicLightbox img），如果默认样式还加了!important，内联样式就会被覆盖。而通过给外层容器加自定义类，再编写更具体的选择器，就能稳定覆盖默认样式。

内容的提问来源于stack exchange，提问作者Michael Reyes