CSS positioning between sibling elements-CSS Tutorial-php.cn

CSS positioning between sibling elements

无忌哥哥

Release： 2018-06-29 15:26:21

Original

5628 people have browsed it

CSS positioning between sibling elements

* Note:

* 1. The css native selector is the fastest to find elements

* 2. The custom selector starts with:, which is very similar to the pseudo-class in CSS

* 3. The custom selector is positioned based on the position found using the native selector

* 4. Use native selectors as much as possible to get elements

1.:nth-child(n): css is calculated from 1

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

Copy after login

2.:nth-child(2n): Select all even-numbered elements (n=[1,2,3,...])

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

Copy after login

3.:nth-child(2n 1): Select all odd-numbered elements (n=[0 ,1,2,...])

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

Copy after login

4.:nth-child(even): Get the even-numbered position element; nth-child(odd): Get the odd-numbered position element

$(&#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;) //奇数行为绿色文本

Copy after login

5.:nth-last-child(): Calculate the position in reverse order

$(&#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;)  //倒序开始选择偶数位置

Copy after login

6.:first-child: The first child element of the parent element

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

Copy after login

7.:last-child: The last child element of the parent element

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

Copy after login

8.:only-child: The only child element of the parent element

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

Copy after login

9.nth -of-type(), similar to nth-child(), only returns elements of the same type

<!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>

Copy after login

The above is the detailed content of CSS positioning between sibling elements. For more information, please follow other related articles on the PHP Chinese website!