切换屏幕时如何移除左侧box-shadow 自定义导航时左侧相关样式

我需要在切换屏幕时自定义左侧的color、border-left或box-shadow属性，同时希望移除左侧的box-shadow效果，恳请各位帮忙提供可行解决方案。

1. CSS媒体查询实现（适配不同屏幕尺寸场景） #

直接给目标左侧元素添加如下样式，替换对应选择器和参数即可生效：

/* 第一步：强制移除左侧box-shadow */
.left-target-element {
  box-shadow: none !important;
}

/* 小于768px移动端样式自定义 */
@media (max-width: 767px) {
  .left-target-element {
    color: #你需要的色值;
    border-left: 宽度 样式 色值; /* 示例：4px solid #1890ff */
  }
}

/* 大于等于768px桌面端样式自定义 */
@media (min-width: 768px) {
  .left-target-element {
    color: #你需要的色值;
    border-left: 宽度 样式 色值;
  }
}

注：将.left-target-element替换为实际左侧元素的选择器，可通过F12元素审查获取，若样式不生效可叠加父级选择器提升权重。

2. JS动态控制实现（主动切换屏幕/路由场景） #

如果是通过事件触发屏幕切换，可监听视口变化动态切换类名控制样式：

const leftEl = document.querySelector('.left-target-element')
// 窗口尺寸变化监听
window.addEventListener('resize', () => {
  if (window.innerWidth < 768) {
    leftEl.classList.add('mobile-left-style')
    leftEl.classList.remove('desktop-left-style')
  } else {
    leftEl.classList.add('desktop-left-style')
    leftEl.classList.remove('mobile-left-style')
  }
})
// 初始化执行一次
window.dispatchEvent(new Event('resize'))

对应CSS样式：

.left-target-element {
  box-shadow: none;
}
.mobile-left-style {
  color: #333;
  border-left: 4px solid #1890ff;
}
.desktop-left-style {
  color: #666;
  border-left: 4px solid #f5222d;
}

内容的提问来源于stack exchange，提问作者Duy Hồng