伪类元素 伪元素

1. 伪类元素选择器

在某种状态下发生样式的改变

（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） last-child 最后一个

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

伪元素是内联元素；
在css样式里写，依托于已经存在的标签里

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

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

        span:before {
            content: '今天 ';  伪元素的内容
            color: red;
        }
        
        span:after {
            content: ' 不错!';
            color: red;
        }