CSS positioning between sibling elements

无忌哥哥
Release: 2018-06-29 15:26:21
Original
5639 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

$('ul :nth-child(2)').css('color', 'red')
Copy after login

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

$('ul :nth-child(2n)').css('color', 'red')
Copy after login

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

$('ul :nth-child(2n+1)').css('color', 'red')
Copy after login

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

$('ul :nth-child(even)').css('color', 'red')  //偶数行为红色文本
$('ul :nth-child(odd)').css('color', 'green') //奇数行为绿色文本
Copy after login

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

$('ul :nth-last-child(2)').css('color', 'red')  //倒数第2个,即第9位
$('ul :nth-last-child(even)').css('color', 'red')  //倒序开始选择偶数位置
Copy after login

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

$('ul :first-child').css('color', 'red')
Copy after login

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

$('ul :last-child').css('color', 'red')
Copy after login

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

$('ul :only-child').css('color', 'red')
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中文网(m.sbmmt.com)</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!

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template