如何使用jQuery修改$(this)下特定子元素的CSS样式？

你当前的代码直接对$(this)（也就是被点击的.info_td元素）应用样式，所以会改变整个父元素的样式。要只修改它内部的特定子元素，需要用jQuery的find()或children()方法在当前元素的范围内定位目标子元素。

解决方案示例： #

假设你要修改.info_td下带有.target-child类的子元素，代码可以改成这样：

$(document).ready(function(){
    $(".info_td").click(function(){
        // 查找当前元素下所有带.target-child类的后代元素
        $(this).find('.target-child').css({'width': '500px','background-color': 'grey'});
    })
})

不同场景的选择方式： #

• 如果目标子元素是直接子元素（仅一级嵌套），用children()更高效：

  $(this).children('.target-child').css({'width': '500px','background-color': 'grey'});
  

• 如果子元素是特定标签（比如<span>），可以直接通过标签选择：

  $(this).find('span').css({'width': '500px','background-color': 'grey'});
  

核心逻辑就是通过find()或children()缩小样式修改的范围，只作用于你需要的子元素，而不是整个父元素。

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