<div class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
:not-child()
选中不包括:not-child()括号中元素的其余元素。例:(除了最后一个元素,其余元素字体颜色为红色)
.main :not(:last-child) {
color: red;
}
:nth-child()
:first-child // 某元素下的第一个元素,例: (main下第一个p元素的字体颜色为红色)
.main p:first-child {
color: red;
}
:last-child // 某元素下的最后一个元素,例: (main下最后一个p元素的字体颜色为红色)
.main p:last-child {
color: red;
}
:nth-child(n) // 某元素下的第n个元素,例: (main下第二个p元素的字体颜色为红色)
.main p:nth-child(2) {
color: red;
}
:nth-child(odd) // 某元素下的奇数元素,例: (main下奇数p元素的字体颜色为红色)
.main p:nth-child(odd) {
color: red;
}
:nth-child(even) // 某元素下的偶数元素,例: (main下偶数p元素的字体颜色为红色)
.main p:nth-child(even) {
color: red;
}
:nth-child(3n+1) // 选中某元素下符合( 3 * 当前元素下标 + 1)条件的元素,例: (main下第1,4,7等元素)
.main p:nth-child(3n+1) {
color: red;
}
:nth-of-type(2) // 选中某元素下符合条件的本元素,例: (main下第2个P元素字体颜色为红色)
.main p:nth-of-type(2) {
color: red;
}
:nth-last-child(n) // 某元素下的倒数第几个元素,例: (main下倒数第2个元素字体颜色为红色)
.main p:nth-last-child(2) {
color: red;
}
:nth-child(n+4) // 某元素下第3个元素之后的元素,例: (main下第3个元素之后的元素字体颜色为红色)
.main p:nth-child(n + 4) {
color: red;
}
:nth-child(-n+4) // 某元素下第4个及之前的元素,例: (main下第4个及之前的元素字体颜色为红色)
.main p:nth-child(-n + 4) {
color: red;
}
:nth-child() // :nth-child() 多个拼接用法,例: (main下第2个元素到第6个元素之间的偶数元素字体颜色为红色)
.main p:nth-child(n + 2):nth-child(even):nth-child(-n + 6) {
color: red;
}