html - CSS 覆盖 CSS 和 jQuery UI

Question

所以我为我即将出版的书准备了一个常规的 CSS/HTML 网站。它有一个名为 Bonus Features 的部分，用于我写的额外文章。它们使用从外部 HTML 页面读取的 jQuery UI 弹出。

因为我想要标题和日期……即

Hello World

2011 年 5 月 6 日

...为了非常靠近，而不是通常的间隙，我创建了一个单独的 CSS 样式表 (dialog.css)。

body {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
}

h1 {
    font-weight: bold;
    margin: 0;
}

h1 + p {
    margin: 0;
}

h2 {
    margin: 0;
}

h2 + p {
    margin: 0;
}

p {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 10px;
    margin-top: 0px;
}

不幸的是，dialog.css 似乎覆盖了 default.css(对于网站)，因为每当我打开然后关闭弹出窗口时，Bonus Features 页面上的文本杂乱无章，从 dialog.css 读取，直到浏览器刷新。

有没有办法防止这种情况发生，比如特殊的 HTML 或 CSS 代码？

谢谢。

Answer 1

听起来 dialog.css 正在主页范围内加载。

如果你的对话框是这样构建的:

<div id="dialog">
    <!-- content -->
</div>

然后你可以像这样制作你的CSS:

#dialog h1 {
    font-weight: bold;
    margin: 0;
}

并且这些属性将仅适用于 id #dialog

元素内的元素