ホームページ >ウェブフロントエンド >CSSチュートリアル >兄弟要素間の CSS の位置決め
兄弟要素間の CSS の位置決め
- 无忌哥哥オリジナル
- 2018-06-29 15:26:215665ブラウズ
同じレベルの要素間の CSS の位置
* 注:
* 1. CSS ネイティブ セレクターは、要素を最も速く見つけることができます
* 2. カスタム セレクターは: で始まり、疑似クラスと非常によく似ています。 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): nth-child( od ): 奇数の位置要素を取得します
$('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')
の最後の子要素
$('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 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。