高级选择器和伪元素

1. 高级选择器的种类

CSS 伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字
当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类

（1）伪类选择器之状态类

:checked
:hover
:active
:focus
… …

（2）伪类选择器之结构类

:nth-child(n) 
:nth-last-child(n) 
:nth-of-type(n) 
:nth-last-of-type(n) 
… …

（3）伪类选择器之属性类

[ att ]  
[ att = value ]  
[ att ^= value ] 
[ att $= value ] 
[ att *= value ] 
… …

2. 伪类选择器之状态类

（1）:checked 该伪类表示表单元素被选中的状态，可以用于单选按钮，复选框等元素上

        input:checked {
            width: 50px;
            height: 50px;
        }

    <form action="">
        <input type="radio" name='sex'> 男
        <input type="radio" name='sex'> 女
    </form>

（2）:active 该伪类表示表单元素、链接等元素被**的状态，此处被**的概念比较特殊（对于输入框而言，是鼠标左键按下且未抬起的时候；对于a元素，也是鼠标左键按下且未抬起的时候）

    <form action="">
        <input type="text">
    </form>

        input:active {
            background-color: red;
        }

（3）:hover 该伪类表示鼠标箭头放在被选中的元素上的状态，可以用于任意元素上

    <div>
        鼠标悬停变红色
    </div>

        div {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: blue;
        }
        
        div:hover {
            background-color: red;
        }

（4）:focus 该伪类表示当用户点击,触摸,通过键盘的 “tab” 键选择表单元素、链接等元素时会被触发（聚焦和失去聚焦）

    <input type="text">
    <a href="#">百度</a>

        input:focus+a {
            font-size: 33px;
        }

3. 伪类元素选择器之结构类

（1）:nth-child()

    <ul>
        <li>python</li>
        <li>java</li>
        <li>shell</li>
        <li>js</li>
        <li>vue</li>
    </ul>

        /* 选择第三个li标签 */
        li:nth-child(3) {
            color: red;
        }

（2）:nth-last-child() 反序选择
（3）:first-child 第一个

4. 伪元素基本概念(就两个)

::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素
::after创建一个伪元素，其将成为匹配选中的元素的最后一个子元素

    <div>
        <span>天气</span>
    </div>

        span::before {
            content: '今天 ';
            color: red;
        }
        
        span::after {
            content: ' 不错!';
            color: red;
        }