Question

所以我正在使用jquery-ui手风琴小部件，我想调整宽度。当我在内部为它设计样式时，它可以工作。但是当我在外部做它不会。如果有人能帮助我理解为什么它不能在外部工作，那就太好了。此外，如果有人可以帮助我垂直居中这个小部件，它将是有史以来最好的圣诞节。代码如下：

HTML（内部CSS有效）：

<body>
<div class="container">
    <div id="accordion" style="width: 500px; margin: 0px auto;">
             ..headers and divs for panels and content
    </div>
</div>
</body>

不起作用的外部CSS：

#accordion {
   width: 500px;
   margin: 0px auto;
}

提前感谢所有帮助！

Answer 1

内部（内联）CSS规则的优先级高于外部规则。

可能有一些规则会覆盖您的外部CSS，而内部获取最高优先级并覆盖它们。

您可以使用“Inspect元素”检查发生的规则（On chrome - 此工具也存在于Firefox，IE等上 - 只需单击F12即可打开它）。在检查元素时，您可以看到选择了哪个规则以及它在代码中的位置（文件和行号），还可以看到整个继承树。

enter image description here

Answer 2

包含（链接元素）的顺序在优先级中起作用。

包含或包含文件中较低的代码具有较高的优先级。内联样式的优先级高于CSS定义的规则。

然后您可以添加!important关键字以提高优先级。

优先事项如下：

带!important
带有!important
没有!important
没有!important

Answer 3

Jquery-UI有一些覆盖外部css的默认CSS。通过在指定元素时更精确，您可以获得比默认CSS更高的优先级：

body .container #accordion {
   width: 500px;
   margin: 0px auto;
}

Answer 4

好吧，伙计们。菜鸟错了。

我有两个我正在使用的css文件的副本，并且html链接到我没有编辑的那个。感谢所有的回复。得到了一些很好的提示和信息。

外部css在内部工作时不工作

4 个答案: