如何用jQuery正确选择#Artwork > path:nth-child(10)元素？

咱们一步步来排查和解决这个问题：

1. 选择器的核心陷阱：nth-child vs nth-of-type #

你当前用的#Artwork > path:nth-child(10)有个容易踩的坑：nth-child(10)是选中父元素#Artwork下的第10个子元素，不管它是什么标签。如果#Artwork里面还包含其他SVG元素（比如<g>、<rect>这类），那第10个子元素大概率不是你要的<path>，自然选不到目标。

正确的做法是换成nth-of-type(10)，它只会统计父元素下同类型的<path>元素，精准定位#Artwork里的第10个<path>：

(function($) { 
  var clouds = $('#Artwork > path:nth-of-type(10)');
  TweenLite.to(clouds, 1, {opacity:0, y:50}); 
})(jQuery);

2. 修复语法小问题 #

你原来的代码里，var clouds = $('#Artwork > path:nth-child(10)')后面少了分号——虽然JavaScript有时会自动补全，但这种细节问题可能导致代码意外失效，加上分号更稳妥。

3. 确保DOM完全加载后执行代码 #

如果你的代码是在DOM还没渲染完成时运行的（比如放在页面<head>里），那#Artwork元素还没生成，自然选不到。可以把代码包裹在$(document).ready()里，保证DOM就绪后再执行：

jQuery(document).ready(function($) {
  var clouds = $('#Artwork > path:nth-of-type(10)');
  TweenLite.to(clouds, 1, {opacity:0, y:50}); 
});

4. 验证元素是否被正确选中 #

可以先在控制台打印选中的元素，确认是否真的获取到了目标：

jQuery(document).ready(function($) {
  var clouds = $('#Artwork > path:nth-of-type(10)');
  console.log(clouds); // 查看控制台是否输出对应的DOM元素
  if(clouds.length > 0) {
    TweenLite.to(clouds, 1, {opacity:0, y:50}); 
  } else {
    console.log("目标元素未找到");
  }
});

按照上面的步骤调整，应该就能解决选择器无效的问题了。

内容的提问来源于stack exchange，提问作者Dan