Question

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

<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>

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

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

Answer 1

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

div ul.MenuBarVertical li {...}

如果你可以将id添加到div或ul元素（如果你在页面上有一个这样的元素），那就更好了。如果没有其他工作，您可以使用!important参数，但强烈不推荐。

Answer 2

有几种可能的解决方案：

1）使用类来定义所需的属性。 e.g。

<ul class="MenuBarVertical">
    <li class="other">Text 1</li>
    <li class="other">Text 2</li>
</ul>

然后声明您希望在li上拥有的样式。在你的css文件中相应地声明它或者用javascript为这个类插入ruleblock，你可以动态创建一个样式块并将其添加到头部或使用现有的样式块并附加此规则。

2）包括内联样式块：

<ul class="MenuBarVertical">
<style scoped>
   .MenuBarVertical li{
       /*declarations here*/
   }
</style>
    <li>Text 1</li>
    <li>Text 2</li>
</ul>

scoped attribute为rather new，除了firefox和chrome之外的浏览器无法识别，这就是我添加.MenuBarVertical部分以进一步指定您想要的li的原因风格（increase specificity），它仍然有效。在所有浏览器中识别出scoped后，您可以将其删除，然后只需编写li{...}。

请不要：

a）使用内联样式 - 坏，总是尽量避免这种情况！

b）使用!important - 更糟糕，也不要这样做！

相同标签的多个CSS声明

2 个答案: