只改变孩子里面的img

Question

说我的代码如下：

<ul>
   <li><img /></li>
   <li>
      <ul>
         <li><img /></li>
      </ul>
   </li>
</ul>

我正在尝试为第一个img标记设置默认大小，但不会影响第二个标记。我所做的一切也影响了另一个。目前我尝试过：

$('ul#gallery > li').find('img').css('width','650px');
$('ul#gallery > li img').css('width','650px');

除其他外，但没有任何作用。

Answer 1

您是否尝试过使用jQuery :first选择器？

$("li img:first").css('width','650px');

• http://api.jquery.com/first-selector/

Answer 2

我的示例中没有id="gallery"，但假设以下代码（只有外部<ul>具有gallery ID）：

<ul id="gallery">
   <li><img /></li>
   <li>
      <ul>
         <li><img /></li>
      </ul>
   </li>
</ul>

然后适当的CSS选择器为ul#gallery > li > img。

Answer 3

$('ul#gallery > li > img').css('width','650px');