首頁 > web前端 > css教學 > 主體

CSS在同級元素之間定位

无忌哥哥
發布: 2018-06-29 15:26:21
原創
5618 人瀏覽過

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>
登入後複製

以上是CSS在同級元素之間定位的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板