* 注意:
* 1.css原生選取器尋找元素的速度是最快的
* 2.自訂選取器用:開始,與css中的偽類非常相似
* 3.自訂選取器是基於使用原生選取器尋找到的位置進行定位的
* 4.儘可能的使用原生選取器來擷取元素
1.:nth-child(n) : css都是從1開始計算
$('ul :nth-child(2)').css('color', 'red')
2.:nth-child(2n): 選擇所有的偶數位置元素(n=[1,2,3,...])
$('ul :nth-child(2n)').css('color', 'red')
3.:nth-child(2n+1):選擇所有的奇數位置元素(n=[0,1,2,...])
$('ul :nth-child(2n+1)').css('color', 'red')
4.:nth-child(even):擷取偶數位置元素; nth-child(odd):擷取奇數位置元素
$('ul :nth-child(even)').css('color', 'red') //偶數行為紅色文本$('ul :nth-child(odd)').css('color', 'green') //奇數行為綠色文本
5.:nth-last-child(): 倒序計算位置
$('ul :nth-last-child(2)').css('color', 'red') //倒數第2個,即第9位$('ul :nth-last-child(even)').css('color', 'red') //倒序開始選擇偶數位置
6.:first-child:父元素的第一個子項目
$('ul :first-child').css('color', 'red')
7.:last-child:父元素的最後一個子項目
$('ul :last-child').css('color', 'red')
8.:only-child: 父元素中的唯一子項目
$('ul :only-child').css('color', 'red')
9.nth-of-type(),與nth-child()類似,僅返回同類型元素
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>在同級元素之間定位</title></head><body><!-- <ul><li>php中文網(www.php.cn)</li></ul> --><ul><li>清單項目01</li><li>清單項目02</li><li>清單項目03</li><li>清單項目04</li><li>清單項目05</li><li>清單項目06</li><li>清單項目07</li><li>清單項目08</li><li>清單項目09</li><li>清單項目10</li></ul><button>運行</button></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
