深入解析：四、CSS选择器（续）和三大特性

目录

1、分组选择器

2、伪类选择器

2.1、状态伪类选择器

1、链接伪类

2、用户行为伪类

2.2、结构伪类选择器

表格隔行变色效果案例

2.3、表单伪类选择器

3、伪元素选择器

4、属性选择器

5、CSS三大特性

---

1、分组选择器

        是将不同的选择器组合在一起。使用逗号分割。也称为并集选择器。

使用场景：多个元素具备相同的样式。

语法：

元素1,
元素2 {
  color: pink;
}

2、伪类选择器

        选择元素的特定状态或结构位置，符号是冒号(:)。

• 状态伪类：根据用户交互或状态变化选择。比如：鼠标经过链接、

表单获得焦点等。

• 结构伪类：根据元素的位置选择。比如：选择第5个第10个元素、

选择前3个元素等。

• 表单伪类：针对表单元素的状态。比如：表单禁用、选中复选框等

2.1、状态伪类选择器

1、链接伪类

        链接伪类用于根据链接（a标签）的不同状态（如未访问、悬停、点击等）为其添加样式，从而提升用户体验和界面交互性。

使用场景：设置链接的不同状态的样式。

链接伪类	作用
a:link	未访问链接的默认样式
a:visited	已访问的样式
a:hover	鼠标悬停在链接上时的反馈
a:active	链接被点击时的瞬时状态（鼠标左键点击不松开）

伪类顺序规则（LVHA顺序）

a:link -> a:visited -> a:hover -> a:active

代码示例：

  
  
  
  


  跳转至百度
  跳转至新浪
  跳转至淘宝

2、用户行为伪类

        用户以某种方式和文档交互的时候应用，这些用户行为伪类，有时叫做动态伪类。

使用场景：

1. 鼠标经过元素的时候，修改样式。

2. 表单获得焦点的时候。

动态伪类	作用
:hover	鼠标经过元素
:focus	获得焦点的元素（表单）

代码示例：

  
  
  
  


  
文字
  

2.2、结构伪类选择器

        根据元素的位置选择目标元素。

使用场景： 选择第1个或者最后一个或者第n个元素。

结构伪类	作用
:first-child	一组兄弟元素中的第一个元素
:last-child	一组兄弟元素中的最后一个元素
:nth-child(n)	一组兄弟元素列表中第n个元素

n的取值可以是：

• 数字：从1开始
• 关键字：odd（奇数）、even（偶数）
• 公式：:nth-child(3n) 3的倍数，第3.6.9...个元素；:nth-child(n+2) 第2个以及以后的元素；:nth-child(-n+3) 前面3个元素（注意公式的n取值从0开始计算）。

代码示例：

  
  
  
  


  

    
1
    
2
    
3
    
4
    
5
    
6
  
  

    
1
    
2
    
3
    
4
    
5
    
6
  

表格隔行变色效果案例

  
  
  
  


  
2.3、表单伪类选择器
        针对表单元素的状态。
使用场景：
1. 表单按钮禁用的时候，调整颜色。
2. 复选框选中修改样式。

    

      
姓名
      
数据
      
日期
    
    

      
杨瀚森
      
10分
      
2025年7月12日
    
    

      
易建联
      
9分
      
2007年10月31日
    
    

      
王治郅
      
6分
      
2001年4月6日
    
    

      
孙悦
      
4分
      
2008年12月8日
    
    

      
周琦
      
2分
      
2018年10月31日
    
    

      
姚明
      
0分
      
2002年10月31日
    
    

      
崔永熙
      
1分
      
2024年10月28日
    


表单伪类
作用
:disabled
表单禁用
:checked
选中状态，单选复选按钮
代码示例：



  
  
  
  


  注册
  

  
  同意注册协议


3、伪元素选择器
        选择元素的特定部分（使用双冒号 ::）
伪元素选择器
作用
::before
元素内插入伪元素，作为第一个元素
::after
元素内插入伪元素，作为最后一个元素
div::before {
  content: "开始";
  color: red;
}
div:after {
  content: "结束";
  color: red;
}
注意：
before和after 是插入的 伪元素，特性类似内联元素。
content 属性是必须，不能省略，没有内容空引号即可。
代码示例：



  
  
  
  


  

    伪元素选择器：
    1. 伪元素选择器是通过元素的特殊状态或位置来选择元素的。
    2. 伪元素选择器是通过元素的特殊状态来选择元素的。
    3. 伪元素选择器是通过元素的特殊状态来选择元素的。
  
  
  
pink


4、属性选择器
        根据元素的属性特征来精准定位元素，从而实现更灵活的样式控制。
使用场景：
1. 表单样式控制。
2. 图标字体控制。
3. 国际化语言适配等等。
属性选择器
作用
[属性]
匹配包含指定属性的元素
[属性=值]
匹配属性值等于指定值的元素
[属性^=值]
匹配属性值以指定字符串开头的元素
[属性$=值]
匹配属性值以指定字符串结尾的元素
[属性*=值]
匹配属性值任意位置包含指定字符串的元素
样例代码：



  
  
  
  


  修改文字颜色 

  修改文字颜色

  修改文字颜色

  修改文字颜色

  修改文字颜色 

  
  

  
  

  
  

  


5、CSS三大特性
继承性：子元素继承父元素样式主要是跟文字相关的样式继承。
层叠性：后面样式会覆盖前面样式,主要解决样式冲突问题。但是要看选择器权重来确定优先级。
优先级：由选择器的权重决定，权重高的规则覆盖权重低的规则。
        浏览器通过优先级来判断哪些属性值与一个元素最为相关。优先级是基于不同种类选择器组成的匹配规则。 原则：
1. 优先级相等的时候，CSS 中最后的那个声明的样式将会被应用到元素上。（层叠遵循就近原则）。
2. 其余判断那个选择器权重高，优先执行那个样式。
3. 权重是4位一组，是分开的层级，不能进位。
选择器类型
权重值
优先级说明
!important
无限大
强制覆盖所有规则（慎用）
内联样式
(1, 0, 0, 0)
行内样式权重最高
ID 选择器
(0, 1, 0, 0)
每个 ID 增加 0,1,0,0
类/属性/伪类
(0, 0, 1, 0)
每个类/属性/伪类增加 0,0,1,0
类型（标签）/伪元素
(0, 0, 0, 1)
每个标签/伪元素增加 0,0,0,1
通配符/继承
(0, 0, 0, 0)
通配符和继承权重最低
        浏览器通过优先级来判断哪些属性值与一个元素最为相关。优先级是基于不同种类选择器组成的匹配规则。
权重叠加：
权重是累加的，每个选择器的层级权重相加。