css_5_复合选择器_伪类选择器_初步了解与动态伪类

一.概念

• 伪类：很像类（class），但不是类，是元素特殊状态的一种描述。
• 作用：选中特殊状态的元素。
• 结构：

元素名：状态（）

二.动态伪类

1. 超链接未被访问的状态

元素名：link

        /* 选中的是没有访问过的a元素 */
        a:link {
            color: green;
        }

2. 超链接被访问过的状态

元素名：visited

         /* 选中的是访问过的a元素 */
         a:visited {
            color: red;
        }

3. 鼠标悬浮在元素上的状态

元素名：hover

         /* 选中的是鼠标悬浮状态下的a元素 */
         a:hover {
            color: purple;
        }

4. 元素被激活的状态（激活：摁下鼠标不松开）

元素名：active

        /* 选中的是激活状态的a元素 */
         a:active {
            color: pink;
        }

• 注意：
  编写动态伪类选择器时，要遵循L V H A 的顺序

link → visited → hover → active

5. 获取焦点的元素

元素名：focus

         input:focus,select:focus {
            color: yellowgreen;
            background-color: brown;
        }

• 只能用于表单元素
• 通过点击触摸等方式选择元素，就是获取焦点

*一些后续

• a:link和a:visited是a标签特有的
• :hover和 : active 是所有元素都可以用的
  举例：

       /* 选中的是鼠标悬浮的span元素 */
         span:hover {
            color: yellow;
        }
         /* 选中的是激活的span元素 */
         span:active {
            color: blue;
        }

代码和成果展示：

   <style>
        /* 选中的是没有访问过的a元素 */
        a:link {
            color: green;
        }
         /* 选中的是访问过的a元素 */
         a:visited {
            color: red;
        }
         /* 选中的是鼠标悬浮状态下的a元素 */
         a:hover {
            color: purple;
        }
         /* 选中的是激活状态的a元素 */
         a:active {
            color: pink;
        }
         /* 选中的是鼠标悬浮的span元素 */
         span:hover {
            color: yellow;
        }
         /* 选中的是激活的span元素 */
         span:active {
            color: blue;
        }
    
         input:focus,select:focus {
            color: yellowgreen;
            background-color: brown;
        }
    </style>

    <a href="#">这是在说动态伪类。</a>
    <a href="#">这是在说动态伪类。</a>
    <br>
    <span>动态伪类</span>
    <br>
    <input type="text">