형제 요소 사이의 CSS 위치 지정-CSS 튜토리얼-php.cn

형제 요소 사이의 CSS 위치 지정

无忌哥哥

풀어 주다： 2018-06-29 15:26:21

원래의

5662명이 탐색했습니다.

동일한 레벨의 요소 간 CSS 위치

* 참고:

* 1. CSS 기본 선택기는 요소를 찾는 데 가장 빠릅니다.

* 2. 사용자 정의 선택기는 의사 클래스와 매우 유사한:으로 시작합니다. in 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): 짝수 요소 가져오기( 홀수 ): 홀수 위치 요소 가져오기

$(&#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!