jQuery CSS 框架的正确样式

Question

所以我有一个在某些部分使用 jQuery 的应用程序。例如自动完成和日历日期选择器。我正在引入一种名为 .more-compact 的新样式，它将实现应用程序的较小版本。此类当前位于包含整个应用程序的 div 中。这个类可以减少几乎所有东西的高度、宽度和字体大小。但是当我尝试对任何 jQuery 元素执行此操作时，它就不起作用了。这是 css 文档中典型样式的外观：

.more-compact ul li {
    font-size: 12px;
}

但是对于 jQuery 自动完成元素，它只有在我删除“.more-complete”部分时才有效。不过我不希望这样，因为这是单个样式表的一部分，而且我只希望在使用 .more-compact 版本时字体是那个大小。

任何想法是什么导致这种嵌套不起作用？ jQuery 样式表是否超过了我自己的？这个样式表在文档中是最低的，所以应该优先。

Answer 1

尝试使用!important

.more-compact ul li {
    font-size: 12px !important;
}

但请尝试使用更具体的规则。通过在您选择的元素之前指示一个或多个元素，规则变得更加具体并获得更高的优先级

HTML

<div id="test">
  <span>Text</span>
</div>

CSS

div#test span { color: green; }
div span { color: blue; }
span { color: red; }