-1

<li>我在 .js 文件中为页面中的标签定义了一个 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>

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

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

4

2 回答 2

2

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

div ul.MenuBarVertical li {...}

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

于 2013-06-04T14:35:23.333 回答
1

有几种可能的解决方案：

1）使用类来定义你想要的属性。例如

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

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

2）包括一个内联样式块：

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

scoped 属性相当新，除了 firefox 和 chrome 之外的浏览器无法识别，这就是为什么我添加了该.MenuBarVertical部分以进一步指定li您想要设置样式的 s（增加特异性）并且它仍然可以工作。一旦scoped在所有浏览器中被识别，您就可以放弃它并只写li{...}.

请不要：

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

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

于 2013-06-04T14:37:09.150 回答