CSS :not-child() :nth-child()的一些常用属性

 
class="main">
    <p>1p>
    <p>2p>
    <p>3p>
    <p>4p>

: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;
}