1.含义

根据一定的语法规则，可以选中页面的指定元素并设置样式

2.类型

选择器分为通用选择器、标签选择器、类选择器、ID选择器等

（1）通用选择器：即通配选择器，给所有的标签设置样式，所有都会生效，一般不会使用，语法如下：

*{ 属性：值；}

（2）标签选择器：即元素选择器，通过标签来选定指定的元素，语法如下：

标签名 {属性：值；}

<head>
    <style>
        p{
           font-style: oblique;
         }
    </style>
</head>
<body>
    <p>本句话字体为倾斜体</p>
</body>

（3）类选择器：给class属性class可以重复使用，可以根据class属性为元素分组，一个元素可以有多个class，之间用空格隔开，语法如下：

.class属性值{属性：值；}

<head>
    <style>
        .box{
           background-color:skyblue;
          }
    </style>
</head>
<body>
    <p class="box">这是天蓝色的一句话</p>
</body>

（4）ID选择器：根据id属性值选择，语法如下：

#id属性值{属性：值；}

<head>
     <style>
        /* p{color: red;} */
    #p1{
        color: slateblue;
    }
    </style>
</head>
<body>
    <p id="p1">只是一句紫色的语句</p>
</body>

（5）多元素选择器：可以同时匹配选择器，之间用逗号分隔开，语法如下：

选择器1，选择器2{属性：值；}

（6）后代元素选择器：后代元素是指直接或间接包含被祖先元素包含的元素，子元素也是后代元素，之间通过空格分隔开，语法如下：

元素1 元素2{属性：值；}

（7）子元素选择器：子元素是指直接被父元素包含的元素，匹配元素1的所有子元素2，匹配所有元素1的元素2，语法如下：

元素1>元素2{属性：值；}

（8）相邻元素选择器：匹配所有元素1相邻的同级元素2，语法如下：

元素1+元素2{属性：值；}

（9）伪类选择器：选择器的特殊状态，可对链接的状态进行设置

选择器

描述

clink

设置正常状态下，向未被访问的链接样式。

visited

设置已经访问后的链接样式。

:hover

设置鼠标悬停在链接上的样式

:active

设置点击链接但未松开时的样式

（10）属性选择器：通过标签的属性名和属性值来匹配元素。其中attr是指“attribute”，“属性”属性名；val是指“value”，“值”属性值

属性 描述

[attr]

 匹配所有具有该attr的元素
[attr=val] 匹配所有attr等于val的所有元素
[attr*=val] 匹配至少一个以上的属性中val的元素
[attr^=val] 匹配所有attr以val开头的所有元素
[attr$=val] 匹配所有attr以val结尾的所有元素
版权声明：本文为weixin_45524929原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_45524929/article/details/128455036