兄弟要素間の CSS の位置決め-CSSチュートリアル-php.cn

兄弟要素間の CSS の位置決め

无忌哥哥

リリース： 2018-06-29 15:26:21

オリジナル

5628 人が閲覧しました

同じレベルの要素間の CSS の位置

* 注:

* 1. CSS ネイティブセレクターは、要素を最も速く見つけることができます

* 2. カスタムセレクターは: で始まり、疑似クラスと非常によく似ています。 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): nth-child( od ): 奇数の位置要素を取得します

$(&#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;)

ログイン後にコピー

の最後の子要素

$(&#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 中国語 Web サイトの他の関連記事を参照してください。