css 3セレクタの:nth-child(n)と:nth-of-child(n)
1796 ワード
:nth-child(n)および:nth-of-child(n)
:nth-child(n)
セレクタは、エレメントのタイプに関係なく、親エレメントに属するN番目のサブエレメントと一致します.
一般的な使い方は、nth-child(n)が誰の弟を表すか、例えばli:nth-chidl(3)がページの3番目のliを表す
それでもいい .div {
width: 100px;
height: 100px;
background-color: #ccc;
}
div li:nth-child(3) {
background-color: #f40;
}
特殊(奇数) div li:nth-child(odd) {
background-color: #f40;
}
特殊(偶数)p:nth-child(even)
{
background:#0000ff;
}
nth-of-type(n)
:nth-of-type(n)セレクタは、親要素に属する特定のタイプのN番目のサブ要素の各要素に一致する.
その他同上
.div {
width: 100px;
height: 100px;
background-color: #ccc;
}
div li:nth-child(3) {
background-color: #f40;
}
div li:nth-child(odd) {
background-color: #f40;
}
p:nth-child(even)
{
background:#0000ff;
}