结构性伪类

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

:only‐child

e:only-child表示父元素下只有一个子元素而且该元素为e

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

        span:only-child {
   
            color: red;
        }

:first‐of‐type/last‐of‐type

父元素下同类型同级别的第一个元素和最后一个元素

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

        span:only-child {
   
            color: red;
        }

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

:nth‐of‐type(n)/nth‐last‐of‐type(n)

同类型同级别的第几个（从1开始）

:only‐of‐type

与:only‐child进行对比发现区别

    <div>
        <span>
            qwe
            <span>qwe</span>
        </span>
        <li>1</li>
        <li>2</li>
        <li>
            <span>zxc</span>
            <p>asdadsfs</p>
        </li>
        <li>4</li>
    </div>

        span:only-child {
   
            color: red;
        }

子元素中只能有span元素

        span:only-of-type {
   
            color: blue;
        }

同级别中只有一个span元素

元素状态伪类

:enabled

可用状态的元素

:disabled

禁用状态的元素

:read‐only

只读状态的元素

:focus

得到焦点的元素

:checked

选中状态的元素

::selection

当前选中(通过鼠标画选或Ctrl+A)的元素，支持的元素、样式有限

    <div>
        <p>asdadasdasdas</p>
    </div>

没加样式之前

加样式之后

		p::selection {
   
            color: red;
            background: #ccc;
        }

属性选择器

• E[attr] 有属性attr的E元素
• E[attr=“val”] 属性attr的值为val的E元素
• E[attr^=“val”] 属性attr的值以val开头的E元素
• E[attr$=“val”] 属性attr的值以val结尾的E元素
• E[attr*=“val”] 属性attr的值包含val的E元素

    <div class="a">
        lorem
        <div class="b">
            lorem
        </div>
    </div>

        div[class="a"] {
   
            color: red;
        }
        div[class="b"] {
   
            color: salmon;
        }

其他选择器

:empty

没有任何内部内容(无论是子元素还是文本)的元素

    <div>
        <div></div>
        <div>
            
        </div>
    </div>

        div:empty {
   
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

只选中了一个，父元素div里面有两个子元素所以没被选中，子元素中第二个div有换行也没有被选中

:not(s)

否定/取反，选择所有不匹配选择器s的E元素

    <div class="a">asdasd</div>
    <div>
        <div>
            asdasd
        </div>
    </div>

        div:not([class="a"]) {
   
            color: red;
        }

有class属性且值为a的div没有被选中

E ~ F

选择同级别中E元素之后的F元素

    <div>
        <div>
            asdasd
        </div>
        <li>sadsad</li>
        <span>ibbib</span>
    </div>

        div ~ span {
   
            color: red;
        }

选中div之后同级别的span元素

:root

文档根元素，即元素

:target

选择当前活动的目标锚点