AJAX 加载后奇怪的 CSS 优先级行为答案

【问题标题】：Strange CSS precedence behavior after AJAX loadAJAX 加载后奇怪的 CSS 优先级行为
【发布时间】：2016-08-03 14:41:31
【问题描述】：

我试图弄清楚我似乎是如何在 AJAX 加载页面上丢失了我的 CSS 优先级。我最后在主页上加载了我的自定义 CSS，所以这应该允许我的 CSS 覆盖任何引导 CSS。通过 AJAX 加载新内容后，引导程序正在覆盖我的自定义 CSS。我可以通过浏览器调试看到引导程序已经覆盖了该属性。

自定义 CSS 样式：

.mytableclass td {
font-size: small;
text-align: center;
vertical-align: middle;}

由于 bootstrap 没有设置字体大小或文本对齐，所以它适用得很好，但我的垂直对齐被覆盖了。我没有在 AJAX 加载页面中再次加载 CSS 文件。一定有什么原因，但几个小时后我还是想不通。

【问题讨论】：

你能发布这个问题的相关 html 吗？另外，您是否尝试过使用!important？
CSS 是否通过 Ajax 加载没有区别；它可能只是简单的旧 CSS 特异性让你失望。我们必须查看示例引导规则集 + 您的规则集来解释原因。
只需将我自己的类添加到所有 td 行中，我就可以很容易地解决这个问题，但这对于不应该表现得如此的事情来说有点工作。澄清一下，CSS 是在 AJAX 加载之前加载的。我不确定你所说的规则集是什么意思。据我了解，在应用 CSS 时，最后加载的 CSS 文件将优先。据我所知，这应该是唯一重要的事情。具体想看什么？

【解决方案1】：

由于您没有发布 Bootstrap CSS 类定义，我猜这是 CSS 选择器优先级问题。

Bootstrap CSS 选择器是否比您的更具体？ Then it gets priority over any CSS loaded later。将您的选择器设为具体或更具体，或应用 !important 指令，但不建议这样做（另请参阅ITCSS）。

【讨论】：

对不起，我正在努力解决它并同时回答。从回复中我设法弄清楚了。 Bootstrap 正在从 table-bordered 中获取样式。这是我桌子上的一堂课。我从另一页复制并粘贴了它，完全忘记了它在那里。在我的自定义 CSS 中添加 table-bordered.mytableclass 解决了这个问题。感谢您的回复。

【解决方案2】：

在其他所有内容之后加载特定的 CSS 不会给它任何优先级。你要做的是确保它有一个更具体的选择器。（您也可以使用 !important，但这是一种 hack，我不推荐它，除非您无法使用其他任何东西。

如果.mytableclass td 是引导程序使用的选择器，请考虑在其前面添加一些内容。即body .mytableclass td。或者您可以进入 HTML 本身并添加一个仅用作 AJAX CSS 中的选择器的 id。

【讨论】：

引导选择器：table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border: 1px solid #ddd;
@RandAl'Thor，你最好的选择是给它一个自定义的类或 id 来使用。如果您无法获取 HTML 代码，请尝试在选择器前面加上 body 或其他内容。