Question

所以我正在制作响应式设计。我还使用了一个名为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浏览器中执行View Source时，“a”和“i”标签不会出现在源代码中，尽管它们在我使用检查器时会出现。

编辑：我还在以下媒体查询中附上CSS规则1：

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

Answer 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; }

可以简化为：

#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;
    }
}

让我知道这是否有效。

为什么这个更具体的CSS规则没有赢得胜利？

1 个答案: