Question

 $(' .middle.clear > .post_home:first ').css('padding-left', '270px !important');

Firefox中的此代码从第一个元素开始，而在Chrome中从元素零开始。我该怎么对待它？

Answer 1

你可以在很短的时间内达到类似的效果：

document.querySelector(".middle.clear > .post_home").style.paddingLeft = "270px";

这里不需要

!important，因为根据我的知识，内联样式始终优先。

这样做的速度要快得多，因为jQuery必须在内部运行几百个命令来创建jQuery对象，然后再运行100个命令来设置它。

但请注意，IE7及以下版本不支持querySelector，但this article提供了在IE7及更低版本中实施querySelector的绝佳方式。

Answer 2

尝试使用 eq（）选择器在您尝试遍历的元素集中指定索引。您还应该尝试避免嵌套多个类选择器，因为这会导致性能不佳。请尝试使用ID。

此外，当您指定！important 标记时，请确保不要在CSS样式和重要标记之间留一个空格。下面的代码将向一个元素中的第一个 post_home 类元素添加一个padding-left CSS属性，该元素具有 clear 和 middle 类。

$('.middle.clear .post_home').eq(0).css('padding-left', '270px!important');

Answer 3

选择器如:first，:last，:nth-child(2)在所有子元素匹配时都有效。

在你的情况下 $(' .middle.clear > .post_home:first ')将假设您有以下结构

<div class="middle clear">
 <div class="post_home">
 <!-- content -->
 </div>
 <!-- no other element of class other than post_home allowed here -->
 <div class="post_home">
 <!-- content -->
 </div>
 <!-- no other element of class other than post_home allowed here -->
 <div class="post_home">
 <!-- content -->
 </div>
 <!-- no other element of class other than post_home allowed here -->
</div>

此处所有子元素都有类post_home，所有子元素都由您的选择器匹配。你有一些其他元素与它不匹配，所以你得到这种异常行为。尝试使用$(' .middle.clear > .post_home ')[0].style.paddingLeft = "270px";或$(' .middle.clear > .post_home ').get(0).style.paddingLeft = "270px";

提示：如果要使用此类选择器，请使用ul li结构。

Jquery firefox行为不端

3 个答案: