형제 요소 사이의 CSS 위치 지정
- 无忌哥哥원래의
- 2018-06-29 15:26:215610검색
동일한 레벨의 요소 간 CSS 위치
* 참고:
* 1. CSS 기본 선택기는 요소를 찾는 데 가장 빠릅니다.
* 2. 사용자 정의 선택기는 의사 클래스와 매우 유사한:으로 시작합니다. in 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): 짝수 요소 가져오기( 홀수 ): 홀수 위치 요소 가져오기
$('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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：간단한 CSS 선택기 수준 선택기다음 기사：간단한 CSS 선택기 수준 선택기