Rumah >hujung hadapan web >tutorial css >CSS在同级元素之间定位
CSS在同级元素之间定位
- 无忌哥哥asal
- 2018-06-29 15:26:215662semak imbas
CSS在同级元素之间定位
* 注意:
* 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>
Atas ialah kandungan terperinci CSS在同级元素之间定位. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：简单的CSS选择器-层级选择器Artikel seterusnya：css的边偏移距离针对left和right可能性值的分析