四、CSS选择器（续）和三大特性

rising start2025-11-03 22:16

目录

1、分组选择器

2、伪类选择器

2.1、状态伪类选择器

1、链接伪类

2、用户行为伪类

2.2、结构伪类选择器

表格隔行变色效果案例

2.3、表单伪类选择器

3、伪元素选择器

4、属性选择器

5、CSS三大特性

1、分组选择器

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

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

语法：

css 复制代码 
元素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

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>链接伪类选择器</title>
  <style>
    /* 链接伪类 */
    /* 未访问的链接 */
    /* a {
      text-decoration: none;
    } */

    /* a:link {
      color: red;
    } */

    /* 已访问的链接 */
    /* a:visited {
      color: green;
    } */

    /* 鼠标悬停链接 */
    /* a:hover {
      color: blue;
      text-decoration: underline;
    } */

    /* 被点击的状态 */
    /* a:active {
      color: yellow;
    } */
    /* 一般开发我们这么写 */
    a {
      color: #000;
      text-decoration: none;
    }

    a:hover {
      color: red;
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <a href="https://www.baidu.com">跳转至百度</a>
  <a href="https://www.sina.com.cn">跳转至新浪</a>
  <a href="https://www.taobao.com">跳转至淘宝</a>
</body>

</html>

2、用户行为伪类

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

使用场景：

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

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

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

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户行为伪类</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: pink;
      text-align: center;
      line-height: 100px;
    }

    /* :hover 鼠标悬停 */
    /* 选择器.box 和 :hover 中间不能有空格 */
    .box:hover {
      background-color: red;
      color: #fff;
    }

    .search {
      width: 100px;
      height: 20px;
      /* 过渡 */
      /* transform: .5s; */
    }

    /* :focus 获取焦点伪类 */
    .search:focus {
      width: 200px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="box">文字</div>
  <input type="text" class="search">
</body>

</html>

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开始计算）。

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>结构伪类选择器</title>
  <style>
    /* 选择第一个小li */
    .ul1 li:first-child {
      color: red;
    }

    /* 选择最后一个小li */
    .ul1 li:last-child {
      color: blue;
    }

    /* 选择第n（3）个小li */
    .ul1 li:nth-child(3) {
      color: green;
    }

    /* 选择所有奇数小li */
    .ul2 li:nth-child(odd) {
      color: pink;
    }

    /* 选择所有偶数小li */
    .ul2 li:nth-child(even) {
      color: red;
    }

    /* 选择所有第n（3）个小li */
    /* .ul2 li:nth-child(3n) {
      color: blue;
    } */

    /* 选择所有第n（3）个小li  从第n个开始选择*/
    /* .ul2 li:nth-child(n+3) {
      color: yellow;
    } */
  </style>
</head>

<body>
  <ul class="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <ul class="ul2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

</body>

</html>

表格隔行变色效果案例

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格隔行变色</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .data {
      /* 合并相邻边框 */
      border-collapse: collapse;

      /* 边框 1像素  实线  颜色 */
      border: 1px solid #f1f1f1;
      width: 400px;
      margin: 0 auto;
      /* 让表格里面的文字水平居中 */
      text-align: center;
      font-size: 14px;
    }

    .data tr {
      height: 35px;
    }

    /* 表格第一行 */
    .data tr:first-child {
      background-color: #8fbcf1 !important;
      color: #fff;
    }

    /* 让奇数行改为隔行变色 背景颜色 */
    .data tr:nth-child(odd) {
      background-color: #f9f9f9;
    }




    /* 鼠标经过  背景色 #f1f1f1 */
    .data tr:hover {
      background-color: #f1f1f1;
    }

    /* 第一行  背景色#8fbcf1; */
    /* 隔行变色  背景色 #f9f9f9  
    鼠标经过  背景色 #f1f1f1 */
  </style>
</head>

<body>

  <table class="data">
    <tr>
      <th>姓名</th>
      <th>数据</th>
      <th>日期</th>
    </tr>
    <tr>
      <td>杨瀚森</td>
      <td>10分</td>
      <td>2025年7月12日</td>
    </tr>
    <tr>
      <td>易建联</td>
      <td>9分</td>
      <td>2007年10月31日</td>
    </tr>
    <tr>
      <td>王治郅</td>
      <td>6分</td>
      <td>2001年4月6日</td>
    </tr>
    <tr>
      <td>孙悦</td>
      <td>4分</td>
      <td>2008年12月8日</td>
    </tr>
    <tr>
      <td>周琦</td>
      <td>2分</td>
      <td>2018年10月31日</td>
    </tr>
    <tr>
      <td>姚明</td>
      <td>0分</td>
      <td>2002年10月31日</td>
    </tr>
    <tr>
      <td>崔永熙</td>
      <td>1分</td>
      <td>2024年10月28日</td>
    </tr>

</body>

</html>

2.3、表单伪类选择器

针对表单元素的状态。

使用场景：

  1. 表单按钮禁用的时候，调整颜色。

  2. 复选框选中修改样式。

表单伪类 作用
:disabled 表单禁用
:checked 选中状态，单选复选按钮

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单伪类选择器</title>
  <style>
    button {
      width: 150px;
      height: 40px;
      background-color: #ff6900;
      /* 去掉按钮默认的边框 */
      border: none;
      color: #fff;
      font-size: 14px;
    }

    /* 表单禁用伪类选择器 */
    button:disabled {
      /* background-color: #ccc; */
      /* 透明度：让整个按钮透明 0~1 */
      opacity: .4;
    }


    /* 表单被选择伪类选择器 */
    input:checked+label {
      color: #ff6900;
    }
  </style>
</head>

<body>
  <button disabled>注册</button>
  <br>
  <input type="checkbox" id="agree">
  <label for="agree">同意注册协议</label>
</body>

</html>

3、伪元素选择器

选择元素的特定部分（使用双冒号 ::）

伪元素选择器 作用
::before 元素内插入伪元素，作为第一个元素
::after 元素内插入伪元素，作为最后一个元素
css 复制代码 
div::before {
  content: "开始";
  color: red;
}
div:after {
  content: "结束";
  color: red;
}

注意：

  • before和after 是插入的 伪元素，特性类似内联元素。
  • content 属性是必须，不能省略，没有内容空引号即可。

代码示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪元素选择器</title>
  <style>
    /* 选择首行 */
    p::first-line {
      color: pink;
    }

    /* 选择首字母 */
    p::first-letter {
      font-size: 28px;
      color: #f00;
    }

    textarea {
      color: pink;
      font-size: 14px;
    }

    /* 选择选择框的占位符 */
    textarea::placeholder {
      color: red;
      font-size: 12px;
    }

    /* before 和 after 伪元素 */
    .box::before {
      content: '前';
      color: red;
    }

    .box::after {
      content: '后';
      color: red;
    }
  </style>
</head>

<body>
  <p>
    伪元素选择器：
    1. 伪元素选择器是通过元素的特殊状态或位置来选择元素的。
    2. 伪元素选择器是通过元素的特殊状态来选择元素的。
    3. 伪元素选择器是通过元素的特殊状态来选择元素的。
  </p>
  <textarea name="" id="" placeholder="请输入内容"></textarea>
  <div class="box">pink</div>
</body>

</html>

4、属性选择器

根据元素的属性特征来精准定位元素，从而实现更灵活的样式控制。

使用场景：

  1. 表单样式控制。

  2. 图标字体控制。

  3. 国际化语言适配等等。

属性选择器 作用
[属性] 匹配包含指定属性的元素
[属性=值] 匹配属性值等于指定值的元素
[属性^=值] 匹配属性值以指定字符串开头的元素
[属性$=值] 匹配属性值以指定字符串结尾的元素
[属性*=值] 匹配属性值任意位置包含指定字符串的元素

样例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器</title>
  <style>
    a {
      color: #000;
      text-decoration: none;
    }

    /* 属性选择器 */
    /* 1.选择包含属性 */
    /* a[class] {
      color: red;
    } */

    /* 2.选择属性等于值 完全匹配 */
    /* a[class="font"] {
      color: red;
    } */

    /* 3.选择属性值以xx开头 */
    /* a[class^="font"] {
      color: red;
    } */

    /* 4.选择属性以xx结尾 */
    /* a[class$="14"] {
      color: red;
    } */

    /* 5.选择属性包含xx */
    /* a[class*="16"] {
      color: red;
    } */

    input[type="text"],
    input[type="password"] {
      /* 选中后没有边框 去掉轮廓线 */
      outline: none;
    }
  </style>
</head>

<body>
  <a href="#">修改文字颜色</a> <br>
  <a href="#" class="font">修改文字颜色</a><br>
  <a href="#" class="font14">修改文字颜色</a><br>
  <a href="#" class="font16">修改文字颜色</a><br>
  <a href="#" class="red">修改文字颜色</a> <br>

  <input type="text">
  <br>
  <input type="password">
  <br>
  <input type="checkbox">
  <br>
  <input type="radio">
</body>

</html>

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) 通配符和继承权重最低

浏览器通过优先级来判断哪些属性值与一个元素最为相关。优先级是基于不同种类选择器组成的匹配规则。

权重叠加：

权重是累加的，每个选择器的层级权重相加。

相关推荐
fruge11 分钟前
前端自动化脚本：用 Node.js 写批量处理工具（图片压缩、文件重命名）
前端·node.js·自动化
Jolyne_26 分钟前
antd Image base64缓存 + loading 态优化方案
前端
BINGCHN32 分钟前
NSSCTF每日一练 SWPUCTF2021 include--web
android·前端·android studio
Z***u6591 小时前
前端性能测试实践
前端
xhxxx1 小时前
prototype 是遗产，proto 是族谱：一文吃透 JS 原型链
前端·javascript
倾墨1 小时前
Bytebot源码学习
前端
用户93816912553601 小时前
VUE3项目--集成Sass
前端
S***H2831 小时前
Vue语音识别案例
前端·vue.js·语音识别
啦啦9118862 小时前
【版本更新】Edge 浏览器 v142.0.3595.94 绿色增强版+官方安装包
前端·edge
蚂蚁集团数据体验技术2 小时前
一个可以补充 Mermaid 的可视化组件库 Infographic
前端·javascript·llm
热门推荐
01GitHub 镜像站点02【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南07Linux下V2Ray安装配置指南08全球最强模型Grok4，国内已可免费使用！（附教程）09Spring Boot 4.0 发布总结：新特性、依赖变更与升级指南10Labelme从安装到标注：零基础完整指南