首頁 >web前端 >css教學 >CSS在同級元素之間定位

CSS在同級元素之間定位

无忌哥哥原創: 2018-06-29 15:26:215648瀏覽

CSS在同級元素之間定位

* 注意:

* 1.css原生選擇器找出元素的速度是最快的

* 2.自訂選擇器用：開始,與css中的偽類別非常相似

* 3.自訂選擇器是基於使用原生選擇器查找到的位置進行定位的

* 4.盡可能的使用原生選擇器來取得元素

1.:nth-child(n) : css都是從1開始計算

$(&#39;ul :nth-child(2)&#39;).css(&#39;color&#39;, &#39;red&#39;)

2.:nth-child(2n):選擇所有的偶數位置元素(n=[1,2,3,...])

$(&#39;ul :nth-child(2n)&#39;).css(&#39;color&#39;, &#39;red&#39;)

3.:nth-child(2n 1):選擇所有的奇數位置元素(n=[0 ,1,2,...])

$(&#39;ul :nth-child(2n+1)&#39;).css(&#39;color&#39;, &#39;red&#39;)

4.:nth-child(even):取得偶數位置元素; nth-child(odd):取得奇數位置元素

$(&#39;ul :nth-child(even)&#39;).css(&#39;color&#39;, &#39;red&#39;)  //偶数行为红色文本
$(&#39;ul :nth-child(odd)&#39;).css(&#39;color&#39;, &#39;green&#39;) //奇数行为绿色文本

#5.:nth-last-child(): 倒序計算位置

$(&#39;ul :nth-last-child(2)&#39;).css(&#39;color&#39;, &#39;red&#39;)  //倒数第2个,即第9位
$(&#39;ul :nth-last-child(even)&#39;).css(&#39;color&#39;, &#39;red&#39;)  //倒序开始选择偶数位置

#6.:first-child:父元素的第一個子元素

$(&#39;ul :first-child&#39;).css(&#39;color&#39;, &#39;red&#39;)

7.:last-child:父元素的最後一個子元素

$(&#39;ul :last-child&#39;).css(&#39;color&#39;, &#39;red&#39;)

8.:only-child: 父元素中的唯一子元素

$(&#39;ul :only-child&#39;).css(&#39;color&#39;, &#39;red&#39;)

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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：簡單的CSS選擇器-層級選擇器下一篇：簡單的CSS選擇器-層級選擇器

看更多