| Name | Description | Example |
| :nth -child(index/even/odd/equation) | Matches the Nth child or odd-even element under its parent element ':eq(index)' only matches one element, And this one will match child elements for every parent element. :nth-child starts from 1, and :eq() starts from 0! Can be used:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2) | Find the second li in each ul:
$("ul li: nth-child(2)") |
| :first-child | matches the first child element ':first' only Matches an element, and this selector will match a child element for each parent element | Find the first li in each ul:
$("ul li:first-child ") |
| :last-child | matches the last child element ':last'matches only one element, and this selection The symbol will match a child element for each parent element
| Find the last li in each ul:
$("ul li:last- child") |
##:only-child | If an element is the only child element of the parent element, it will be matchedIf the parent element contains other elements, it will not be matched.
| Find the li that is the only child element in ul: $("ul li:only-child")
|
Note:
1. :nth-child(index) starts from 1, and eq(index) starts from 0, that is to say $(" ul li:nth-child(0)").css("color","red") cannot obtain matching elements and can only start from 1, that is $("ul li:nth-child(1) ").css("color","red"), and eq(0) can be obtained, the same is to obtain the first child element
:nth-child(even) is to obtain the even number of child elements, That is, the second, fourth, sixth..., and :even starts from index 0, matching the second index, the fourth index..., that is, the first, the third, The fifth..., it seems that they all get an odd number of items, the same is true for :nth-child (odd) and :odd
2. :first-child matches the child elements of each parent class , and :first matches a child element, and the same goes for :last-child and last
3. only-child: matches an element that is the only child element in the parent element, that is, the current child element is The only element in the class matches!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
// $("ul li:first-child").css("color","red");
$("ul li:first").css("color","red");
// $("ul li:last-child").css("color","red");
// $("ul li:nth-child(even)").css("color","red");
// $("ul li:odd").css("color","red");
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>第一个元素</li>
<li>第二个元素</li>
<li>第三个元素</li>
<li>第四个元素</li>
<li>第五个元素</li>
<li>第六个元素</li>
</ul>
<ul>
<li>第一个元素</li>
<li>第二个元素</li>
<li>第三个元素</li>
<li>第四个元素</li>
<li>第五个元素</li>
<li>第六个元素</li>
</ul>
</div>
</form>
</body>
</html>
Next Section<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<script>
$(function(){
// 1选取父元素下索引值是偶数的子元素的索引值(索引值从1开始的)
//找到当前元素的父元素，在找他下面的子元素
$("span.child:nth-child(even)").css("fontSize","30px");
//2选取父元素下,索引值是奇数的元素(索引值从1开始)
$("span.child:nth-child(odd)").css("color","red");
//3匹配每个父元素下，索引值为xx的子元素,索引从1开始
$("span.child:nth-child(1)").css("color","blue");
//4匹配每个父元素的第一个子元素
$("span.child:first-child").css("fontSize","50px");
//5匹配每个父元素的第一个子元素
$("span.child:last-child").css("fontSize","50px");
})
</script>
<body>
<div class="parent">
<span class="child">1</span>
<span class="child">2</span>
<span class="child">3</span>
<span class="child">4</span>
<span class="child">5</span>
</div>
</body>
</html>
