使用 CSS 覆盖左侧样式

Question

我正在尝试更改将鼠标悬停在某个选项上时出现的侧面板的位置。这是来自 chrome 开发者工具的代码：

<nav id= "side_nav" class= "sidebar-bg-color header-side-nav-scroll-show">
    <ul data-template= "nav-template" class= "sidebar-bg-color ps-ready ps-container" data-blind= "source: nodes">
        <li class= "nav_trigger nav_open">
            <div class= "sub_panel" style= "left: 50px;"> == [=11=]
            </div>
        </li>
    </ul>
</nav>

我只需要将样式 left : 50px 更改为 76px。开发人员工具只是将此属性保存在 element.style 下，我无法在我的 CSS 文件中真正定位它。感谢您的帮助！

我试图通过非常具体的方式来定位，但最终定位到主面板而不是辅助面板。这是我试过的代码：

nav #side_nav, ul.sidebar-bg-color ps-ready ps-container, li.nav_trigger nav_open, div.sub_panel{ 
left : 76px; 
},

Answer 1

您可以使用语法 !important，这样它将覆盖您使用 !important 的所有其他格式。在此处了解更多信息：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#!important

您还可以在 HTML 中使用 span 元素，使 CSS 更加具体。

Answer 2

您的CSS select或者应该如下图所示（根据您发布的HTML）。查看每个细节：我删除了所有逗号和一些空格。如果一个元素有多个 class，您可以像 div.class1.class2 一样处理它（没有空格，但在 class 名称之间有一个点）。逗号用于列出相同规则的 separate select 或 not 以指示子元素。要 select 具有 ID 的元素，您可以直接将 ID 附加到元素（不是 nav #side_nav，而是 nav#side_nav）。

nav#side_nav ul.sidebar-bg-color.ps-ready.ps-container li.nav_trigger.nav_open, div.sub_panel { 
  left : 76px; 
}

如有必要，在 76px 之后（分号之前）添加 !important。

使用 CSS 覆盖左侧样式

Overriding left style with CSS

html

css

css-selectors