· 标签选择器

作用：可以选出所有相同的标签，例如 p, h1, h2 ….
特点：不能差异化选择，一次性全部选中所选的标签
使用情况：较多
用法：

<head>
    <style>
        /* 标签选择器 : 协商标签名 */
        p {
            color: rgb(0, 255, 64);
            /* 字体大小 */
            font-size: 50px;
            text-align: center;
        }
        div {
            color: red;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>


<body>
    <p>丛雨酱板载!</p>
    <div>芳乃芳乃 芳乃真香！</div>
</body>

· 类选择器

作用：可以选出1个或多个标签
特点：可以根据需求选择
使用情况：非常多
用法：

<head>
    <style>
        /* 类选择器口诀: 样式 点（.） 定义  结构 类（class）调用  一个或多个  开发最常用 */
        /* 多类名用处统一格式 节省代码量 */
        .box-wh-100px {
            width: 100px;
            height: 100px;
        }
        .red {
            color: red;
        }
        .green {
            color: green;
        }
        .font50 {
            font-size: 50px;
        }
    </style>
</head>


<body>
    <div class="red font50">丛雨酱!</div>
    <div class="green">芳乃酱!</div>
</body>

· id选择器

作用：一次只能选择1个标签
特点：ID属性只能在每个HTML文档中出现一次
使用情况：一般和 js 搭配
用法：

<head>
    <style>
        /* id选择器的口诀:样式#定义，结构id调用，只能调用一次，其他不能使用-这是官方规定的-规范- */
        #pink {
            color: green;
        }
    </style>
</head>


<body>
    <div id="pink">丛雨</div>
    <!-- 只能调用一次id选择器，因此下方id根据官方规定不能使用了 -->
    <!-- <div id="pink">丛雨</div>  -->
</body>

· 通配符选择器

作用：选择所有的标签
特点：选择的太多，有部分不需要
使用情况：特殊情况使用（如全部灰色界面-以致默哀
用法：

<head>
    <style>
        /* * 把 html body div span li 等等标签都改为了其规定的样式 */
        /* 在特殊情况使用 */
        * {
            color: red;
        }
    </style>
</head>


<body>
    <div>丛雨</div>
</body>