用 CSS 覆盖左侧样式答案

【问题标题】：Overriding left style with CSS用 CSS 覆盖左侧样式
【发布时间】：2022-01-08 11:30:35
【问题描述】：

我正在尝试更改悬停选项时出现的侧面板的位置。以下是来自 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;"> == $0
            </div>
        </li>
    </ul>
</nav>

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

我试图通过非常具体来定位目标，最终定位到主面板而不是 sup 面板。这是我尝试过的代码：

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

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

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

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

【讨论】：

问题在于我无法正确定位元素以使用 !important。
我改变了我的回答，添加了一些你可以使用的其他东西。

【解决方案2】：

您的 CSS 选择器应如下所示（根据您发布的 HTML）。查看每个细节：我删除了所有逗号和一些空格。如果一个元素有多个类，你可以像div.class1.class2 一样称呼它（没有空格，但在类名之间有一个点）。逗号用于列出同一规则的单独选择器，not 用于表示子元素，就像您所做的那样。要选择具有 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。

【讨论】：

成功了，非常感谢！