CSS 选择器介绍元素的 id 和 class 属性在项目中的作用，给出选择器的概念并常用的五种元素选择器，文中有较多例

一、元素的 id 和 class

在 HTML 页面中，元素有两个基本属性：id 和 class，这两个属性用于选择元素，用来进行 CSS 或 JS 操作。

id 属性具有唯一性，在同一个页面中，一个 id 只能出现一次；
class 属性不具有唯一性，在同一个页面中可以出现多次，表示一类，相同的 class 具有相同的样式。
可以将 id 类比为身份证号，每个人只能有一个身份证号；将 class 类比为班级，一个班可以有很多人，这些人有一些共同的特点，即 class 的样式。

二、什么是选择器

选择器，通俗来讲就是使用一种方式将你想要的元素选中，只有把元素选中了才可以为其添加 CSS 样式。

在 CSS 中，选中想要的元素的方式有很多，这就是不同的选择器，选择器的不同在于选择方式的不同，但目的都是一样的。

三、常见 CSS 选择器

1、元素选择器

元素选择器就是选中相应的元素，对相同的元素定义同一个 CSS 样式，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            div{
                color: aquamarine;
                font-size: large;
            }
        </style>
    </head>
    <body>
        <div>Like_Frost</div>
        <p>Like_Frost</p>
        <div>Like_Frost</div>
    </body>
</html>

在浏览器中效果如下（只有 div 被添加了样式）：

2、id 选择器

可以为元素添加 id 属性，对其设置 CSS 样式，这就是 id 选择器，一个页面中的 id 唯一。对于 id 选择器，id 名前要加上 #，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            #frost{
                color: aquamarine;
                font-size: large;
            }
        </style>
    </head>
    <body>
        <div id="frost">Like_Frost</div>
        <div>Like_Frost</div>
    </body>
</html>

在浏览器中显示效果（id 为 frost 的元素有 CSS 样式）：

3、class 选择器

class 选择器即类选择器，可以对相同或不同的元素定义相同的类属性，类不具有唯一性。对于类选择器，class 名前要加上 .（点），有如下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            .frost{
                color: aquamarine;
                font-size: large;
            }
        </style>
    </head>
    <body>
        <div class="frost">Like_Frost</div>
        <div>Like_Frost</div>
        <p class="frost">Like_Frost</p>
    </body>
</html>

可以看到，不论是 div 标签还是 p 标签，只要其 class 属性为 frost，就被添加了字体颜色和字号属性：

4、后代选择器

后代选择器即选择元素内部的所有某一种元素，包括子元素和其他后代元素，父元素和后代元素之间必需用空格隔开，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            #frost div{
                color: aquamarine;
                font-size: large;
            }
        </style>
    </head>
    <body>
        <div id="frost">
            <div>Like_Frost</div>
            <div>Like_Frost</div>
            <p>Like_Frost</p>
        </div>
    </body>
</html>

这样，id 为 frost 内部的 div 元素被设置了颜色，其他元素没有影响：

在后代选择器中，父元素和子元素可以为元素选择器、id 选择器、class 选择器的任意两个。

5、群组选择器

群组选择器是指同时对几个选择器进行相同的操作，每两个选择器之间用英文逗号隔开，同样，选择器可以是元素选择器、id 选择器、class 选择器的任意几种，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            div,p{
                color: aquamarine;
                font-size: large;
            }
        </style>
    </head>
    <body>
        <div>Like_Frost</div>
        <div>Like_Frost</div>
        <p>Like_Frost</p>
    </body>
</html>

在浏览器中效果如下：