非零基础自学前端最后一遍一 HTML+CSS 8 CSS常见选择器 8.1 选择器-通配选择器的使用

心已赠人 2024-03-25 14:10 45阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  8 CSS常见选择器
         *   *  8.1 选择器-通配选择器的使用
             *   *  8.1.1 CSS选择器（selector）
                 *  8.1.2 通用选择器

![在这里插入图片描述][44e9741410f24f30a78cd0bb1f2a7988.png_pic_center]

#### 一 HTML+CSS ####

#### 8 CSS常见选择器 ####

##### 8.1 选择器-通配选择器的使用 #####

###### 8.1.1 CSS选择器（selector） ######

*  开发中经常需要找到特定的网页元素进行设置样式
    
     *  思考：如何找到特定的那个元素？
 *  什么是CSS选择器
    
     *  按照一定的规则选出符合条件的元素，为之添加CSS样式
 *  选择器的种类繁多，大概可以这么归类
    
     *  通用选择器（universal selector）
     *  元素选择器（type selectors）
     *  类选择器（class selectors）
     *  id选择器（id selectors）
     *  属性选择器（attribute selectors）
     *  组合（combinators）
     *  伪类（pseudo-classes）
     *  伪元素（pseudo-elements）

###### 8.1.2 通用选择器 ######

*  通用选择器（universal selector）
    
     *  所有的元素都会被选中;
 *  一般用来给所有元素作一些通用性的设置
    
     *  比如内边距、外边距;
     *  比如重置一些内容;
 *  效率比较低，尽量不要使用;

![在这里插入图片描述][363ff8fab1cc45e7a79306c26bd97f3d.png_pic_center]

这是不加样式的情况

![在这里插入图片描述][9791c65407d6468799788e75e39e6d91.png_pic_center]

这就所有都匹配了

![在这里插入图片描述][a20d59220aa54fac9ea6b2915c02c8ca.png_pic_center]

默认情况下，好像浏览器加上了一些间距

![在这里插入图片描述][5e16334a6b394b7c8d92941f6267981f.png_pic_center]

可以看到body默认有一个8px的margin，重置它

![在这里插入图片描述][1c8ac73ac1ad4bcb9da03703383c7d43.png_pic_center]

[44e9741410f24f30a78cd0bb1f2a7988.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/85549b55bd664bd48ab05d491fe7eedb.png
[363ff8fab1cc45e7a79306c26bd97f3d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/022543113aca4f0a8d0b7e0ee980bb86.png
[9791c65407d6468799788e75e39e6d91.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e2c8a36f13fe48949107c5ae3e738c4c.png
[a20d59220aa54fac9ea6b2915c02c8ca.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5f2efc06e4ce49d7b7d6a380b43f2b94.png
[5e16334a6b394b7c8d92941f6267981f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a90032deeb45415a9b1cddb684adba09.png
[1c8ac73ac1ad4bcb9da03703383c7d43.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ba38f8fff94d45d6ab796f245223ae1c.png