jQuery 中“nth-child()”和“nth-of-type()”选择器的区别

在本文中，我们将讨论 jQuery 中 nth-child() 和 nth-of-type() 选择器之间的所有区别。

nth-child() 选择器：此选择器用于根据元素在一组兄弟元素中的位置来匹配元素。它匹配其父元素的所有第 n 个子元素，无论其类型如何。

句法：

:nth-child(number) {
    // CSS Property
}

示例：此示例描述了 nth-child() 选择器的使用。

HTML

 

    
 
    

 

    

        GeeksforGeeks
    
 
    

        CSS nth-child() Selector
    
 
     
Web Technologies Subjects
 
 
    

        
HTML
        
CSS
        
JavaScript
        
Bootstrap
        
Node.js
        
React.js
    

 

输出：

nth-of-type() 选择器：此选择器仅用于为其父元素的第 n 个子元素设置样式。任何 n 可以是数字、关键字或公式。children

句法：

:nth-of-type(number) {
    // CSS Property;
}

示例：此示例描述了 nth-of-type() 选择器的使用。

HTML

 

    
 
    

 

    

        GeeksforGeeks
    
 
    

        CSS :nth-of-type() Selector
    
 
     
Web Technologies Subjects
 
 
    

        
HTML
        
CSS
        
JavaScript
        
Bootstrap
        
Node.js
        
React.js
    

 

输出：

nth-child() 和 nth-of-type() 选择器之间的区别：

nth-child() Selector	nth-of-type() Selector
This selector is used to style only those elements that are the nth number of child of its parent element.	This selector is used to style only those elements that are the nth number of child of its parent element.
It is used to selects all elements that are the nth child	It is used to select all elements that are the nth child
Its syntax is  -: :nth-child(n|even|odd|formula)	Its syntax is -: :nth-of-type(n|even|odd|formula)
It takes 4 Parameters -: 1.  index of each child 2. even child element 3. odd child element 4. formula -: (an + b)	It takes 4 Parameters -: 1.  index of each child 2. even child element 3. odd child element 4. formula -: (an + b)
It does not consider type of the parent while selecting the elements.	It only consider a particular type of the parent.