html - 同一标签的多个 CSS 声明

Question

我在 .js 文件中为 <li> 定义了一个 css 样式页面中的标记。我试图在不更改现有 css 和 js 文件以及页面布局的情况下修改 html 页面。我想插入以下代码:

<div style="float: left; width: 18%; bottom: 6.4%; border-right-style: groove; border-right-width:2px; border-top-style: groove; border-top-width:2px; border-bottom-style: groove; border-bottom-width: 2px; padding-right: 0%; padding-top: 0%; margin-right: 0%; margin-top: 0%; position: fixed;">
    <ul class="MenuBarVertical">
        <li>Text 1</li>
        <li>Text 2</li>
    </ul>
</div>

但是每个<li> html 页面中的标记会自动从现有的 css 文件中选择样式。我不想要这个 <li>标签。我想要一个不同的 css <li>标签。我可以附上那些 <li> 吗？ <div> 下的标签标记并向 div 标记添加一个类，并为其定义一个特定的 css，它可以覆盖每个 <li> 的现有 css。标签？我可以通过在 <li> 中定义样式来覆盖现有的 css。标签如<li style="..."> .它工作正常，但我必须在每个 <li> 中添加样式标签。我想知道我是否将 id 或 class 添加到父标记并在页面本身的某处为其编写 css 以便覆盖 .css 文件中的现有样式。密码是什么？如何在该部分中声明此类 css？还是应该在体内声明？

我希望我能够解释我的问题。我想知道覆盖标签的 css 样式的可能方法。

Answer 1

要覆盖旧规则，您需要尽可能具体地定义元素，如下所示:

div ul.MenuBarVertical li {...}

如果您可以为 div 或 ul 元素添加一个 id(如果您在页面上只有一个这样的元素)，那就更好了。如果其他方法均无效，您可以使用 !important 参数，但强烈不推荐。