如何使用 JQuery 将 css 属性应用于子元素？

任务是使用 jQuery 将 CSS 属性应用于子元素。为此，首先我们借助 jQuery 中的 children()方法选择子元素，然后借助jQuery 中的 css()方法对其应用 CSS 属性。

句法：

// Note : children method selects the direct child to parent
$(selector).children("selector").css("property-name","value")

示例 1

HTML

    
  
    
        
  
        
            How to apply CSS property to a 
            child element using JQuery?
        
  
        
        
        
    
  
    
        
            i am child-1.
            i am child-2.
        
  
        Apply css
  
        
            $("button").click(function () {
  
                // select div element which is the parent
                // select first child(h2) and apply one 
                // or more css property at a time
                $("div").children("h2").css({ 
                    "backgroundColor": "black", "color": "white" });
  
                // apply one property at a time, use 
                // property name just like css and 
                // then sellect second child element(p)
                $("div").children("p").css("background-color", "red");
                $("div").children("p").css("color", "white");
            });
        
    
  
    

输出：

点击按钮前：

点击按钮后：

我们还可以借助 jQuery 中的 find()方法将 CSS 属性应用于孙子和任何后代到父。

句法：

$(sellector).find("descendants-name").css("property-name","value");

示例 2：

HTML

    
  
    
        
        
            How to apply CSS property to a 
            child element using JQuery?
        
  
        
        
        
    
  
    
        
            i am child-1.
            i am child-2.
                i am grand-child-1
            
        
  
        Apply css
  
        
            $("button").click(function () {
  
                // select div element which is the parent
                // select first child(h2) and apply one 
                // or more css property at a time
                $("div").find("h2").css({
                    "backgroundColor": "black",
                    "color": "white"
                });
  
                // Apply one property at a time, use
                // property name just like css
                // and then sellect second child element(p)
                $("div").find("p").css("background-color", "red");
                $("div").find("p").css("color", "white");
  
                // Apply on grand-child
                $("div").find("span").css({
                    "backgroundColor": "black",
                    "color": "white"
                });
            });
        
    
  
    

输出：

点击按钮前：

点击按钮后：