CSS选择器详解

1.选择器的作用

当我们把页面的结构做完之后，想要对页面中的元素进行一对一或者一对多的样式调整，就需要使用选择器。

例如：我们在页面里共插入了四张图片，四张图片的大小都一致，如果我们给每张图片都添加宽高，就比较麻烦。这时候可以用css选择器选中所有图片，这时只需要做一次宽高设置即可。

2.选择器类型及详解

（一）基本选择器

1.标签选择器（类型选择器）：以html中的标签做选择器

                (1)语法格式：标签{属性:属性值; 属性:属性值;}

                        例如：设置文档中所有的图片宽为30px,高为35px。

                        img{width:30px;height:35px}

                (2)使用场景：当我们需要统一某个元素的样式或改变某个元素的默认样式时使用。

 2.类选择器（class选择器）

                (1)语法格式：.class名{属性:属性值; 属性:属性值;}

                       例如：html中有四张图片，第一张图片宽高为50px*50px,其他图片尺寸为30px*35px。我们就可以给第一张图片加class名。

                       加类名： <img class="item" src="路径">

                        设置样式：.item{width:50px;height:50px;}

                注意：类名可以由英文、中文（不推荐）、数字（不能放在第一位）、_组成。

                (2)使用场景

                        1.当我们需要把某个元素单独设置样式时

                        2.当html里有不同元素需要统一样式时使用

                    特点：一个元素可以有多个类名，类名之间需要用空格隔开

   代码演示                    

运行结果

                

3.ID选择器

        （1)语法格式: #id名{属性:属性值;属性:属性值;}

 例如：html中有四张图片，第一张图片宽高为50px*50px,其他图片尺寸为30px*35px。我们就可以给第一张图片加id。

                      添加ID：<img id="banner" src="路径">

                       调用id：#banner{width:50px;height:50px;}

            (2)使用场景

                        1.当我们需要把几个相同元素做区分设置样式时使用

                        2.当html里有不同元素需要统一样式时使用

注意：每个元素只能有一个id名，id命名规则参考class。

4.通配符选择器

                通配符：*

                （1）语法格式：*{属性:属性值;属性:属性值;}

                （2）使用场景：当我们需要对html中所有的元素统一设置样式时使用。通常用于清除边距。

                例如：*{margin:0;padding:0;}

5.群组选择器

                （1）语法格式：选择器1，选择器2，选择器3，…{属性:属性值;属性:属性值;}

                （2）使用场景:当有多个元素需要统一的声明时，使用群组选择器，能够减少代码量，便于后期维护。

                例如：html中的p标签、h2标签、a标签都需要把字号设置为24px，文字颜色为白色。此时应用群组选择器就比较方便。

                代码如下：

                       p,h2,a{font-size:24px;color:white;}

(二)层次选择器

        1.后代选择器（包含选择器）

                     （1）语法格式：父元素 后代元素{属性:属性值;}   

                     （2） 使用场景：当我们需要把父元素下所有后代元素样式统一时

                     （3）为什么要使用后代选择器而不用class选择器呢？因为当我们在做一个复杂页面时，代码量非常多，如果我们设置一个样式就定义一个class，那么我们很难区分各个类，并且起名会起到头秃。

                 案例：我们现在需要将一个类名为item的div下所有的p标签全部设置为红色字体。这时候我们给所有的p标签添加class是非常麻烦的。但是用后代选择器可以解决掉，代码如下：

               .item p{color:red;}

        2.子代选择器

                （1）语法格式：父元素>子元素{属性:属性值;}

                （2）使用场景：当我们需要把段落1、2、5的文字改成绿色，加粗时。如果使用包含选择器，就会把段落3、4一起改变。

这种情况就需要用子代选择器

代码如下：div>p{color:green;font-weight:bold;}

3.相邻兄弟选择器       

        （1）语法格式：前面的元素+后面的元素{属性:属性值;} 

        （2）使用场景：当我们需要给段落5改变字体颜色为黄色时，命名比较麻烦，就可以用。                .item>div+p{color:yellow;}

4.通用兄弟选择器

        （1）语法格式: 前面的元素~后面需要改变的元素{属性:属性值;}

        （2）使用场景：当我们需要把段落5设置格式时，代码如下

.item>div~p{}