javascript - 为什么这个更具体的CSS规则无法取胜？

所以我正在做一个响应式设计。我还使用了名为Readmore的jQuery插件

将浏览器窗口的大小调整为小于500像素时，我调用以下javascript：

$('section.abstract').readmore({
        maxHeight: 60,
        speed: 0,
        moreLink: '<a href="#" class="read-more"><i class="fa fa-plus-square" id="mobile-plus"></i></a>',
        lessLink: '<a href="#" class="read-less"><i class="fa fa-minus-square" id="mobile-minus"></i></a>'
      });

如果窗口高于500像素，则调用以下javascript：

$('section.abstract').readmore('destroy');
      $('section.abstract').readmore({
        maxHeight: 60,
        speed: 0,
        moreLink: '<a href="#" class="read-more">Read more<i class="fa fa-plus-square-o"></i></a>',
        lessLink: '<a href="#" class="read-less">Close<i class="fa fa-minus-square-o"></i></a>'
      });
    }

插入“ read-more”类和i标记似乎在调整大小时工作良好。

但是我有2条预定义的CSS规则，其中只有1条被应用。

这是更具体的CSS规则，应将其应用于小于500像素的移动尺寸：

CSS规则1（更具体）

body.mobile-display.search-results section.search-results table a.readmore.readmore-js-toggle i#mobile-plus, body.mobile-display.search-results section.search-results table a.readmore.readmore-js-toggle i#mobile-minus {
      font-size: 3.875em; }

这是不太严格的CSS规则，将始终适用于所有尺寸：

CSS规则2（不太具体）

section.search-results a.readmore-js-toggle i {
  font-size: 14px;
  margin-left: 5px;
}

请记住，“ a”标签嵌套在表格标签内。为什么不太具体的CSS规则总是能取胜？

它和动态注入（通过javascript）的a和i标签有关吗？我注意到，当我在Firefox浏览器中执行“查看源代码”时，尽管在使用检查器时会出现“ a”和“ i”标记，但它们不会出现在源代码中。

编辑：我也将CSS规则1包含在以下媒体查询中：

@media screen and (max-width: 500px) { .. }

最佳答案

这行：

body.mobile-display.search-results section.search-results table a.readmore.readmore-js-toggle i#mobile-plus, body.mobile-display.search-results section.search-results table a.readmore.readmore-js-toggle i#mobile-minus {
      font-size: 3.875em; }

可以简化为：

#mobile-minus { font-size: 3.875em; }

以下行需要包装在媒体查询中，以仅应用于500px或更大的尺寸：

@media (min-width: 500px) {
    section.search-results a.readmore-js-toggle i {
      font-size: 14px;
      margin-left: 5px;
    }
}

让我知道这个是否奏效。