如何使用CSS覆盖inline left样式 修改hover触发的侧边子面板位置

错误排查 #

• 你之前编写的CSS使用逗号分隔多个选择器，属于并列匹配逻辑，会同时给所有匹配到的导航容器、列表、子面板元素添加left属性，所以会误选主面板
• 多类名选择器不能用空格分隔，空格是后代选择器的标识，比如你写的ul.sidebar-bg-color ps-ready ps-container实际是匹配ul下的ps-ready标签下的ps-container标签，而非同时带有这三个类的ul元素
• 内联样式（也就是开发者工具里的element.style）优先级高于普通外部/内部CSS规则，需要加!important声明才能覆盖

正确CSS规则 #

#side_nav li.nav_trigger .sub_panel {
  left: 76px !important;
}

说明：#side_nav是页面唯一ID，从ID出发逐层向下匹配，可以100%定位到你要修改的目标子面板，加上!important后优先级高于元素自带的inline style，会直接覆盖原来的left: 50px设置。

内容的提问来源于stack exchange，提问作者Alexis Stallman