Home > Article > Web Front-end > CSS positioning between sibling elements

CSS positioning between sibling elements

无忌哥哥Original: 2018-06-29 15:26:215613browse

* 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;)

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;)

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;)

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

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

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

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

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

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

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

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

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Simple CSS selector-level selectorNext article：Simple CSS selector-level selector

See more

CSS positioning between sibling elements

Related articles