1、CSS选择器

选择器是什么？

CSS选择器是CSS规则的第一部分。它是选择HTML元素的方式。

CSS属性：

采取键值对形式：属性名:属性值；

CSS选择器选择标签，CSS属性修改样式。

选择器分类：

根据使用场景不同，选择器也分不同类型。

  • 基础选择器
  • 关系选择器
  • 分组选择器
  • 伪类和伪元素选择器
  • 属性选择器

2、基础选择器

基础选择器指的是有单个选择器组成，常见的有：

  • 类型选择器
  • 类选择器
  • id选择器
  • 通配符选择器

2.1、类型选择器

类型选择器选择某个类型的元素，也称为标签选择器

语法：

css：“类型 {样式声明;...}”

/* 选择所用div标签修改样式 */
div {
  color: gold;
}
/* 选择所有span标签修改样式 */
span {
  color: green:
}

CSS层叠性：

CSS规则可以同时作用于一个元素，浏览器通过特定规则决定最终生效的样式。层叠性解决了样式冲突问题。

原则：后定义的样式覆盖先前的样式。（就近原则）

CSS书写规范

良好的书写规范，让我们更专业。虽然代码自动格式化但是我们还需要了解。

  • 选择器和大括号中间保留1个空格。
  • 属性名和属性值中间也要保留1个空格。
  • 每个CSS属性单独占一行。后期打包压缩无需担心体积问题。

案例：




  
  
  类型选择器
  


  
  
大春

  
夏洛

  
秋雅

  
冬梅

  
    
    
  • 123
    • 
    
  • 456
    • 
    
  • 789
    • 
    
  • 101112
    •

运行结果：

CSS注释

CSS注释的快捷键是 ctrl + / ，注意注释内容左右两侧保持一个空格距离是良好习惯

例如：

span {
  /* 这里添加注释 */
  color: green:
}

2.2、类选择器

类选择器选择某1个元素或者多个元素。

场景：

语法：

css：“.类名{样式声明;...}”

.pink {
  color: pink;
}

html：“<标签 class="类名">”

p标签

注意：

  • 类名自定义，不能是中文、纯数字
  • 多个英文单词组成尽量使用“-”连接
  • 命名要用意义，尽量见名知义
  • class属性可以有多个类名中间用空格隔开

案例：




  
  
  类选择器
  


  
大春

  
夏洛

  
秋雅

  
  
冬梅

  
  

    
产品模块

运行结果：

2.3、id选择器

选择HTML中具有特定id属性的唯一元素

语法：

css：“#id名{样式声明;...}“

#header {
  color: red;
}

html：”<标签 id="id名">“

案例：




  
  
  id选择器
  


  
大春

  
夏洛

  
秋雅

  
冬梅

运行结果：

id和类区别

类选择器：

  • 语法：以 . 开头，后跟类名（如 .nav）
  • 作用：选择class属性的一个或多个元素
  • 特点：可以使用多次
  • 类似：身份证的名字，可以使用多次
  • 场景：后期修改样式基本都是类选择器

id选择器

  • 语法：以 # 开头，后跟id民（如 #header）
  • 作用：选择特定 id 属性的唯一元素
  • 特点：同一页面中，id值必须唯一（不能重复）
  • 类似：身份证的编号，唯一，只能用一次
  • 场景：后期主要是配合JavaScript添加交互效果

2.4、通配符选择器

通配符选择器可以选择HTML中所有的标签，进行样式修改。

语法：”*{样式声明;...}“

* {
  /* 去除所有元素的外边距 */
  margin: 0;
  /* 去除所有元素的内边距 */
  padding: 0;
  /* 统一盒模型*/
  box-sizing: border-box;
}

特殊情况下通过通配符清除所有元素的默认边距和填充，统一不同浏览器的默认样式。

2.5、基础选择器总结

选择器类型

语法示例

匹配范围

复用性

典型使用场景

注意事项

类型选择器

div { ... }

匹配所有指定 HTML 标签元素

某一类型标签

全局样式重置、基础标签样式（如 body, p）

避免滥用，可能导致样式冲突

类选择器

.nav { ... }

匹配所有含指定 class 的元素

多次使用

多元素共享样式

优先使用，避免与 ID 选择器冲突

ID 选择器

#header { ... }

匹配唯一含指定 id 的元素

唯一性

唯一元素标识

必须唯一，避免样式覆盖风险

通配符选择器

* { ... }

匹配所有元素

全局覆盖

全局样式重置

性能较差，慎用

        大部分情况下，我们使用类选择器，是最重要的。