CSS3新特性-选择器

结构性伪类

:first‐child/last‐child

父元素中第一个元素和最后一个元素

    <div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </div>

        div li:first-child {
   
            color: red;
        }
        div li:last-child {
   
            color: green;
        }

这个元素必须是li，并且这个li元素必须是div的第一个子元素（同理最后一个）

:nth‐child(n)/nth‐last‐child(n)

父元素中第几个子元素（last从后往前数），其中n还可以写成odd（奇数）,even（偶数）

    <div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </div>

        li:nth-child(1) {
   
            color: hotpink;
        }
        li:nth-last-child(1) {
   
            color: blue;