<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 基础选择器 */
        /* 标签选择器  */
        p {
            color: grees
        }

        /* 标签选择器：写上标签名，将某一类全部选出 优点：快速更改 缺点：不能单一设置  */

        /* 类选择器  */
        .red {
            color: red;
        }

        /* 类选择器口诀：样式点定义、 结构类调用、 一个或多个、 开发最常用 .类名 为自己定义，不能用div、p之类 
        注意 
        1、类选择器可以用 "." （英文点号）进行标识,后面紧跟类名 （自定义,我们自己命的) 
        2、以理解为给这个标签起了一个名字 
        3、长名称或词组可以使用中横线来为选择器命名 
        4、不要使用纯数字、 中文等命名,尽量使用英文字母来表示 
        5、命名要有意义,
        尽量使别人-跟就知道这个类名的目的  */
        /* 特殊使用————多类名 ——<div class="red font35">多类名</div> */
        .font35 {
            wide: 250;
        }

        /* 一个对象可以添加多个类 */

        /* ID选择器  */
        #pink {
            color: pink;
        }

        /* id选择器口诀：样式#定义、结构id调用、只能调用一次、别人切勿使用  */

        /* 通配符选择器  */
        * {
            color: red;
        }

        /* 不需要调用，给所有标签统一修改 */



        /* 复合选择器 */
        /* 后代选择器 
        格式：元素1 元素2 {}
        表示选择元素1里所有的元素2 可有多层,
        元素1、2可用id与class  */
        ol li {
            color: red;
        }

        ol li p {
            color: pink;
        }

        .nav li p {
            color: red;
        }

        /* 子选择器 
        格式：元素1>元素2 {}
        选择元素1里的 直系 后代元素2 只能一级  */
        div>p {
            color: red;
        }

        /* 并集选择器 
        格式： 元素
        ,元素2 {}
        一次更改多个 
        约定语法规范：并集竖着写 
        注意：最后一个不能加逗号  */
        p,
        div {
            color: red;
        }


        /* 伪类选择器 
        链接伪类选择器 

        未选择的链接  */
        a:link {
            color: red
        }

        /* 点击过的链接  */
        a:visited {
            color: red
        }

        /* 鼠标经过的链接  */
        a:hover {
            color: skybule
        }

        /* 鼠标摁下还未弹起的链接  */
        a:active {
            color: brown
        }

        /* 注意事项： 1、按顺序书写，LVHA顺序：lV Hao  */

        /* foucus复合选择器 
        用于选取获得焦点的表单元素 
        格式：元素1+ :focus {} */
        input:focus {
            color: red;
        }
    </style>
</head>

<body>
    <li class="red">red类</li>
    <div class="red font35">多类名</div>
    <div id="pink">id选择器</div>
</body>

</html>

选择器.html