请问一个css问题，前端工程师帮帮忙！

Question

.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-light > li .sub-menu > li:hover > a, 
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-light > li .sub-menu > li.open > a, 
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-light > li .sub-menu > li.active > a,
.page-sidebar .page-sidebar-menu.page-sidebar-menu-light > li .sub-menu > li:hover > a,
.page-sidebar .page-sidebar-menu.page-sidebar-menu-light > li .sub-menu > li.open > a,
.page-sidebar .page-sidebar-menu.page-sidebar-menu-light > li .sub-menu > li.active > a {
  background: #E21919 !important;
}

这一段css是这个li标签下 hover open active 拥有这三个其中任意一个样式或者三个样式都拥有的li都会改变其下a标签的样式，

这三个li的样式都变成红色了 我现在想让 class="active" 拥有这一个样式的标签单独改变样式 并且 也不影响之前的样式 该怎么写css？ 或者说 js怎么取只有active样式的li而不是取所有包含active样式的li

Answer 1

把!important去掉,再另起一行写
.page-sidebar .page-sidebar-menu.page-sidebar-menu-light > li .sub-menu > li.active > a {
here write your style;
}

Answer 2

因为用li属于父级的ul，所以你的hover父级也会显示，可以用div代替ul

Answer 3

可以用js来控制

Answer 4

用伪元素：hover 比较简单