如何用JavaScript仅为指定嵌套类下的btn元素添加CSS样式？

我尝试为特定按钮类添加CSS样式，但当前JS代码会将样式应用到页面上所有带有btn类的元素，如何限制样式仅作用于mainPage下pageWithButton内的btn元素？

HTML代码 #

<div class="mainPage">
    <div class="pageWithButton">
        <div>
            <a href="" title="Learn more" class="btn btn-default" role="button" target="">Look up
                <i class="fas fa-search"></i>
            </a>
        </div>
    </div>
</div>

原JS代码 #

<script>
    $('.mainPage').each(function(){
        if($(".pageWithButton")){
            $(".btn").css("padding", "8px, 32px, 1px, 9px")
        }
    })
</script>

解决方案 #

方法一：基于原代码修改（保留遍历逻辑） #

原代码的核心问题是全局选择$(".btn")，同时存在判断逻辑错误和padding格式错误。修改后的代码如下：

$('.mainPage').each(function(){
    // 仅在当前.mainPage元素内部查找目标按钮
    const targetBtn = $(this).find(".pageWithButton .btn");
    // 通过length判断是否找到匹配元素（jQuery对象永远为真，不能直接用if判断）
    if(targetBtn.length > 0){
        // CSS padding值需用空格分隔，原逗号写法会导致样式失效
        targetBtn.css("padding", "8px 32px 1px 9px");
    }
})

方法二：简化写法（直接精准定位） #

如果不需要对每个.mainPage做额外逻辑处理，可以直接用层级选择器定位目标元素，写法更简洁：

// 直接选中所有符合层级要求的.btn元素
$('.mainPage .pageWithButton .btn').css("padding", "8px 32px 1px 9px");

关键注意点 #

• 限定选择范围：通过$(this).find()或直接层级选择器，把查找范围限制在.mainPage内部，避免影响全局的.btn元素
• 修正padding格式：CSS中padding的多值语法是用空格分隔，逗号用于给多个元素设置不同padding，原代码的逗号会导致样式不生效
• 正确判断元素存在：jQuery选择器返回的对象始终为真值，必须通过length > 0判断是否找到匹配元素

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