CSS基础1.1

明飞19872025-07-14 14:22

HTML骨架

html 复制代码 
<!DOCTYPE html>
<!-- 中文网站 -->
<html lang="zh-CN">
<head>
    <!--charset="UTF-8" 规定网页的字符编码  -->
    <meta charset="UTF-8">

    <!-- ie(兼容性差) / edge -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 宽度 = 设备宽度 : 移动端网页的时候要用 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

overflowSEO三大标签

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta:desc -->
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
    <!-- meta:kw -->
    <meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- link:favicon : 浏览器标题栏图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    
</body>
</html>

项目结构搭建

文件和目录准备

1.新建项目文件夹xtx-pc-client，在VScode中打开

  • 在实际开发中，项目文件夹不建议使用中文
  • 所有项目相关文件都保存在xtx-pc-client目录中

2.复制favicon.ico图标到xtx-pc-client文件夹里

  • 一般习惯将ico图标放在项目根目录

3.复制images和uploads子目录到xtx-pc-client文件夹目录中

  • mages：存放网站固定使用的图片素材，如：logo、样式修饰图片...等
  • uploads：存放网站非固定使用的图片素材，如：商品图片、宣传图片...等

4.新建index.html在根目录

  • index.html整个项目入口首页文件

5.新建css文件夹保存网站的样式，并新建以下CSS文件：

  • base.css：基础公共样式
  • common.css：该网站中多个网页相同模块的重复样式，如：头部、底部
  • index.css：首页样式

基础公共样式(base.css)

  1. 场景：一般项目开始前，首先会去除掉浏览器默认样式，设置为当前项目需要的初始化样式
  2. 作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发
  3. 已经准备好base.css代码，同学们需要认识，项目中可以直接引入使用

index页面骨架(index.html)

index.html整个项目入口首页文件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta:desc -->
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台">
    <!-- meta:kw -->
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <!-- link:favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 按顺序引入: 外链式样式表后写的生效 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线客服</a></li>
                <li><a href="#"><span></span>手机版</a></li>
            </ul>
        </div>
    </div>

    <!-- 头部 -->
    <div class="header wrapper">
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">餐厨</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">孕婴</a></li>
                <li><a href="#">服装</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" placeholder="搜一搜">
            <!-- 定位 放大镜 -->
            <span></span>
        </div>
        <div class="car">
            <span>2</span>
        </div>
    </div>


    <!-- banner -->
    <div class="banner">
        <div class="wrapper">
            <!-- 有多少个图,就有都少个li -->
            <ul>
                <li>
                    <a href="#"><img src="./uploads/banner_1.png" alt=""></a>
                </li>
            </ul>

            <!-- 侧导航 -->
            <div class="aside">
                <ul>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                </ul>
            </div>

            <!-- 箭头 -->
            <!-- prev: 上一个 -->
            <a href="#" class="prev"></a>
            <!-- next : 下一个 -->
            <a href="#" class="next"></a>

            <!-- 圆点: 当前状态: current / active -->
            <!-- js 找到用户点击的li 添加类名 li变成白色的 -->
            <ol>
                <li></li>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>

    <!-- 新鲜好物 -->
    <div class="goods wrapper">
        <!-- hd header 头部 -->
        <div class="hd">
            <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
            <a href="#">查看全部</a>
        </div>
        <!-- body 身体, 内容 -->
        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<span>899</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<span>899</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<span>899</span></div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8</h3>
                        <div>￥<span>899</span></div>
                    </a>
                </li>

            </ul>
        </div>
    </div>

    <!-- 生鲜 -->
    <div class="shengxian wrapper">
        <div class="hd">
            <h2>生鲜</h2>
            <a href="#" class="more">查看全部</a>
            <ul>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">水果</a></li>
            </ul>
        </div>
        <div class="bd clearfix">
            <div class="left">
                <a href="#"><img src="./uploads/fresh_goods_cover.png" alt=""></a>
            </div>
            <div class="right"></div>
        </div>
    </div>

    <!-- 版权区域 -->
    <div class="footer">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li>
                        <!-- 通过伪元素添加标签实现精灵图 -->
                        <span>价格亲民</span>
                    </li>
                    <li>
                        <span>物流快捷</span>
                    </li>
                    <li>
                        <span>品质新鲜</span>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">帮助中心</a> |
                    <a href="#">售后服务</a> |
                    <a href="#">配送与验收</a> |
                    <a href="#">商务合作</a> |
                    <a href="#">搜索推荐</a> |
                    <a href="#">友情链接</a>
                </p>
                <p>CopyRight @ 小兔鲜儿</p>
            </div>
        </div>
    </div>
</body>

</html>

什么是CSS?

CSS：层叠样式表（Cascading style sheets）

CSS给页面中的HTML标签设置样式 。比如文本的颜色、字体大小、页面布局、背景图片等，从而使网页不仅具有良好的结构（通过 HTML 实现），还能拥有美观的视觉效果。

css写在style标签中，style标签一般写在head标签里面，title标签下面

CSS 书写顺序:

不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯

CSS 书写顺序: 1. 布局属性(定位 / 浮动 / display) ; 2. 盒子模型; 3. 文字属性

CSS的书写顺序推荐

|----|---------|---------------------------------------------------|
| 顺序 | 类别 | 属性 |
| 1 | 布局属性 | display 、position、float、clear、visibility、overflow |
| 2 | 盒子模型+背景 | width、height、margin、padding、border、background |
| 3 | 文本内容属性 | color、font、text-decoration、 text-align、ine-height |
| 4 | 点缀属性 | cursor、 border-radius、 text-shadow box-shadow |

注意点：

  • 开发中推荐多用类+后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐不要超过3个

CSS 的核心功能：

  • 样式定义：允许开发者为网页元素指定具体的样式，如颜色、字体、边距、填充、位置等。
  • 布局控制：通过 CSS 可以精确地控制网页上各个元素的位置和排列方式，实现复杂的布局设计。
  • 响应式设计：使用媒体查询（Media Queries）等功能，可以创建适应不同设备尺寸（如桌面、平板电脑、手机）的响应式网页设计。
  • 可维护性：通过将样式与内容分离，使得代码更加清晰易读，便于维护和更新。

CSS 如何工作:

  • 选择器（Selector） ：用来选择要应用样式的 HTML 元素。例如，p { color: blue; } 表示所有 <p> 标签内的文本颜色都将是蓝色。
  • 属性（Property） ：指定你想要改变的特定样式。例如，在 color: blue; 中，color 就是一个属性。
  • 值（Value） ：属性对应的设置或数据。在上面的例子中，blue 是 color 属性的值。

CSS 应用方法:

CSS 可以通过以下三种方式应用到 HTML 文档中：

|--------------------------|------------------------------|----------|---------|
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
| 内联样式( 行内式 ) | css写在标签的style属性中 | 当前标签 | 配合js使用 |
| 内部样式表( 内嵌式**)** | css写在style标签中 | 当前html页面 | 小案例demo |
| 外部样式表( 外联式 ) | css写在单独的.css文件中，需要配合link标签引入 | 多个页面 | 项目中 |

内联样式( 行内式 )：

CSS 写在 标签的style属性中.

<p style="color: blue;">这是一个段落。</p>

<div style="color: green; font-size: 30px;">这是div标签</div>

优点：针对单个元素快速应用样式。

缺点：不利于维护，不推荐大量使用。

案例:

html 复制代码 
<body>
   
  <!--   p标签 没有添加style属性 -->
   <p>这是p标签</p>
    <!-- 内联样式(行内式):  CSS 写在 p标签的style属性中. -->
    <p style="color: blue;">这是一个段落。</p>
    
    
   <!--   div标签 没有添加style属性 -->
    <div>这个div是什么颜色</div>
    <!-- 内联样式(行内式):  CSS 写在div标签的style属性中. -->
    <div style="color: green; font-size: 30px;">这是div标签</div> 
</body>

内部样式表( 内嵌式**)**：

css写在style标签中。

style标签一般写在head标签里面，title标签的下面

提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
适用于单个页面的样式定义。

  • 维护性 ：虽然内部样式表对于小型项目或快速原型设计非常有用，但对于较大的项目，建议使用外部样式表（通过 <link rel="stylesheet"> 引入），以便更好地组织和复用样式。
  • 优先级 ：内部样式表的优先级高于外部样式表，但低于内联样式（即直接在 HTML 元素上使用的 style 属性）。这意味着如果在同一元素上有多种样式来源，内部样式表中的规则可能会覆盖外部样式表中的规则，除非有更具体的规则或使用了 !important 声明。

案例:

这是一个完整的 HTML 页面示例，展示了如何在 <head> 部分使用 <style> 标签来定义一个简单的样式规则，该规则将所有 <p> 元素的文字颜色设置为蓝色。

当你将上述代码保存为一个 .html 文件并在浏览器中打开时，你会看到页面上的所有段落文本都是蓝色的。这是因为你在 <head> 部分通过 <style> 标签定义了一个 CSS 规则，这个规则适用于整个 HTML 文档中的所有 <p> 元素。
<head> 部分：

  • 包含了 <meta> 标签和 <title> 标签，这些标签提供了关于文档的基本信息。
  • <style> 标签被放置在**<head>标签** 里，其中包含了 CSS 规则。在这个例子中，规则**p { color: blue;.... } 表示所有的 <p> 标签内的文本颜色都将是蓝色。**

<body> 部分：

  • 包含了实际的页面内容，比如 <h1> 和 <p> 标签。
  • 每个 <p> 标签内的文本都会根据 <style> 标签中的 CSS 规则呈现为蓝色。
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 标签中定义css样式 -->
     <style>
       /* 这里写的都是css */
       
        p {
           /* 将所有段落文字颜色设置为蓝色 */
           color: blue; 
            /* 字变大 px:像素 */
            font-size: 15px;
             /* 背景颜色 */
             background-color: green;
              /* width  height; */
            width: 300px;
            height: 50px;
        }
     </style>

</head>
<body>
  <!-- 页面内容 -->
    <!--默认样式  在style标签中没有对应的h1标签选择器 -->
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落，其文字颜色被设置为蓝色。</p>
  <p>这是另一个段落，同样显示为蓝色。</p>
  <!--默认样式  在style标签中没有对应的div标签选择器 -->
  <div >这是div标签</div> 
    
</body>
</html>

外部样式表( 外联式 )：

css写在单独的.css文件中 ，通过 <link> 标签链接引入一个独立的 .css 文件。
最常用的方法，便于维护和复用样式。

案例：

假设我们有一个简单的 HTML 页面，并希望通过 CSS 来美化它：

当你在浏览器中打开 index.html 文件时：

  • 页面背景是墨绿色（由 CSS 控制）
  • 标题 <h1> 是蓝色
  • 所有p段落文字大小为 16px，行高为 1.5
  • 带有 class="highlight" 的段落会显示黄色背景和粗体黑色文字

第一步：创建 index.html 文件

这是你的网页主文件，在 <head> 中通过 <link> 标签引用外部 CSS 文件。

注意事项:

  • 路径要正确：

确保 href="styles.css" 中的路径正确指向 CSS 文件的位置。

如果 CSS 文件在子文件夹里（如 /css/styles.css），请相应修改为 href="css/styles.css"

  • 缓存问题：

浏览器可能会缓存旧的 CSS 文件。如果你修改了样式但没看到效果，尝试刷新页面或清除缓存。

  • 文件编码：

推荐将 HTML 和 CSS 文件都保存为 UTF-8 编码格式，避免中文乱码。

html 复制代码 
<link rel="stylesheet" type="text/css" href="styles.css">分析

|-------------------------------|---------------------------|
| 元素 | 说明 |
| <link rel="stylesheet" ...> | 在 HTML 中引入外部 styles.css文件 |
| href="styles.css" | 指定 styles.css文件的路径 |
| type="text/css" | 指明文件类型（HTML5 中可省略） |

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表示例</title>

     <!-- 引入外部 CSS 文件 -->
     <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落，它的样式来自外部的 styles.css 文件。</p>
    <p class="highlight">这个段落有特殊的高亮样式。</p>
</body>
</html>

第二步：创建 styles.css 文件

将以下内容保存为 styles.css，并放在与 index.html 相同的目录下。

css 复制代码 
/* styles.css */

/* 设置整个页面背景和字体 */
 
body {
    background-color: hsl(175, 75%, 69%);
    font-family: Arial, sans-serif;
    color: #333;
    padding: 20px;
}



/* 修改 h1标签 的颜色 */
h1 {
    color: #007BFF;
}


/* p评标段落基本样式 */
p {
    font-size: 16px;
    line-height: 1.5;
    color: red;
}

/* 自定义类样式  
给带有 highlight 类的段落添加样式  
*/
.highlight {
    background-color: yellow;
    padding: 2px 5px;
    font-weight: bold;
    color: black;
}

<style> 标签

<style> 标签是 HTML 中用于定义内嵌样式表的元素。 它允许你在 HTML 文档内部直接编写 CSS（层叠样式表）代码，从而控制页面中元素的外观和布局。使用 <style> 标签可以在不离开 HTML 文件的情况下为文档添加样式，尽管在实际开发中更推荐使用外部CSS样式表以提高代码的可维护性和复用性。

**<style> 标签提供了一种简单的方法来将 CSS 直接嵌入到 HTML 文档中，适用于小规模项目或是需要快速实现样式的场合。**然而，为了保持代码的整洁、可维护性和性能优化，建议在大多数情况下使用外部样式表。这样不仅能够更好地管理样式文件，还能利用浏览器缓存机制提升加载效率。

主要用途：

  • 内嵌样式 ：通过 <style> 标签，你可以在 HTML 文档的 <head> 部分或者任何其他部分（虽然通常放在 <head> 内）直接编写 CSS 代码，以应用特定于该页面的样式。
  • 作用范围：内嵌样式仅对当前 HTML 文档有效，这意味着它们不会影响其他页面的样式。

使用场景:

尽管外部CSS样式表是最佳实践 ，但在某些情况下使用 <style> 标签是有意义的：

  • 快速原型设计：当你快速测试一个想法或进行原型设计时，在 HTML 文件中直接添加样式可以加快开发速度。
  • 局部样式覆盖 ：如果只需要在一个页面上应用少量自定义样式，而不希望创建一个新的外部 CSS 文件，可以直接在页面内使用 <style> 标签。
  • 邮件模板：由于许多电子邮件客户端对链接到外部资源的支持有限，因此在 HTML 邮件模板中常会看到内联样式或内部样式表。

注意事项:

  • 优先级问题：内嵌样式具有较高的优先级，可能会覆盖外部样式表中的相同规则。这可能导致样式冲突，因此在组织项目结构时需谨慎处理。
  • 性能考量：相比于外部样式表，内嵌样式无法被缓存，每次加载页面时都需要重新下载，对于大型网站来说可能会影响性能。

案例:

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>style标签的使用</title>

    <!-- 在这里编写 CSS 代码   -->
    
     <style>
       /*  整个body的样式 */
      body{
        background-color: #f0abab;
        font-family: Arial, sans-serif;
       }
     /* 好标签的样式 */
      h1 {
        color: navy;
      }
      /* intro类的样式 */
      .intro {
        font-size: 18px;
        color: green;
      }

     </style>

</head>
<body>
     <h1>欢迎来到我的网站</h1>
     <p class="intro">这是一个使用 CSS 样式的段落。</p>
</body>
</html>

style标签的属性:

**type**属性：

指定样式表的语言类型。虽然现代浏览器默认识别 text/css，但为了兼容性，通常会显式声明：

html 复制代码 
<style type="text/css">
    /* CSS 代码 */
</style>

**media**属性：

指定媒体查询条件，用来定义哪些设备或视窗条件下应用这些样式。例如，你可以为打印版本和屏幕版本分别定义不同的样式：

html 复制代码 
<style media="screen">
    /* 屏幕显示的样式 */
</style>
<style media="print">
    /* 打印时使用的样式 */
</style>

CSS的选择器

选择器的作用：

选择页面中对应的标签（找她），方便后续设置样式（改她）

实际开发的情况:

类选择器用的最多

id一般配合js使用，除非特殊情况，否则不要使用id设置样式

实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）

|---------|----------|-------------------------------------------------------------------|----------------------------------------------------------------------|
| | 选择器类型 | 写法示例 | 含义说明 |
| 单选择器 | 元素选择器 | 在 CSS 中，div{}, p{}, 是 元素选择器， (注意:这里的 div {}是"元素选择器"，而不是"div元素本身") | div{}, p{}元素选择器 匹配的是html页面中所有 标签名为 :<div></div> <p></p> 等的元素 |
| 单选择器 | 类选择器 | .father{} | html页面中选中所有 具有 class="father" 的 元素 |
| 单选择器 | ID 选择器 | #main | html页面中选中唯一一个 具有 id="main" 的 元素 |
| 单选择器 | 属性选择器 | [type="text"] | html页面中选中所有 具有 type="text" 属性的元素 |
| 复合选择器 | 后代选择器 | div p | html页面中选中所有 div 元素下的 p 元素 |
| 复合选择器 | 直接子元素选择器 | div > p | html页面中选中所有 div元素 的直接子元素 p |
| 复合选择器 | 交集选择器 | div.my-class (divp这种是错误的) | html页面中选中必须是 div元素 并且有 类class="my-class" 的元素 |
| 复合选择器 | 并集选择器 | div,p | html页面中选中所有 div元素 和 p元素 |
| | | | |
| 伪 选 择 器 | 伪类选择器 | a:hover, li:first-child | 选中html页面中处于某种状态的 元素（如鼠标悬停、第一个子元素等） a 元素在 hover 鼠标悬停状态下 |
| 伪 选 择 器 | 伪元素选择器 | ::before | 在元素内容前插入内容 |

1.元素选择器：

标签选择器 就是 以标签名命名的选择器.

结构：标签名{ css属性名：属性值； }

作用：通过标签名，找到页面中所有这类标签，设置样式(选中所有的这个标签都生效css)

注意点：

  1. 标签选择器选择的是一类标签，而不是单独某一个

2.标签选择器无论嵌套关系有多深，都能找到对应的标签

元素选择器 vs元素区别

|------|------------------------------------------------------------------|-----------------------------------------------------------|
| 项目 | 元素选择器 ("身份证号码") | 元素 ("人") |
| 定义 | CSS 中用于匹配特定标签名的规则 例如: div{}、p {}这样的选择器，它匹配的是 HTML 中对应标签名div p元素。 | HTML 中构成网页结构的基本标签元素 例如:<div></div> <p></p> |
| 写在哪里 | 写在CSS 文件 或 <style> 标签中 | 写在HTML 文件 |
| 作用 | 告诉浏览器"要给哪些元素设置样式" 例如:要给div p 元素设置样式 | 网页的实际结构内容，可以被选择器选中并应用样式 |
| 是否可见 | 不可见，是样式规则的一部分 | 可见（配合样式后显示在页面上） |
| 示例代码 | CSS文件里: div { color: red; } p { font-size: 20px; } | HTML 文件里: <div>这是一个 div 元素</div> <p>这是一个段落元素</p> |
| 举例说明 | div{}, p{}都是元素选择器 (注意：这里的 div p 是"元素选择器"，而不是"元素本身"。) | :<div></div>标签元素 <p></p>标签元素 可以被div{} p{}元素选择器选中。 |
| 关系 | 选择器用来选中 HTML 元素并为其设置样式 | HTML 元素是被选择器选中的对象 |
| 类比 | 选择器就像"身份证号码"，用来识别人（元素） | 元素就像"具体的人"，有真实的存在,具有各种属性（比如姓名、年龄等） |
| | | |

案例:

在css文件里(元素选择器):

css 复制代码 
/* CSS 文件中的div p元素选择器 */
div {
    color: red;
}
p {
    color: blue;
}

或者在HTML文档内部(元素选择器):：

html 复制代码 
<style>
    /* <style> 标签内的div p元素选择器 */
    div {
    color: red;
    }
   p {
    color: blue;
   }
</style>

在HTML文件中(元素):

html 复制代码 
<!-- HTML 文件中的元素 div p -->
<p>这是一个段落。</p>
<div>这是一个div容器。</div>
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器 {} */
        /* 标签选择器 就是 以标签名命名的选择器 */
        p {
            color: red;
        }

        /* 标签选择器 选中所有的这个标签都生效css */
    </style>
</head>
<body>
     <!--  有对应的p标签选择器 css样式生效 -->
    <p>这是一个段落，其文字颜色被设置为蓝色。</p>
     <p>这是另一个段落，同样显示为蓝色。</p>
  <!--默认样式  在style标签中没有对应的div标签选择器 -->
  <div >这是div标签</div> 
    
</body>
</html>

2.类选择器 ：

类选择器定义:以一个点号 . 开头，后接类名, 用于选中所有具有该类名的 HTML 元素，并为其应用样式。

类选择器结构：.类名{ css属性名：属性值； }

类选择器作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

  1. **所有标签上都有class属性，class属性的属性值称为类名（类似于名字）**class="XXX"

2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

3.一个标签的class属性可以同时有多个类名，类名之间以空格隔开

4.类名可以重复，一个类选择器可以同时选中多个标签

案例1:

在css文件里

css 复制代码 
//.father  类选择器 用来选中 HTML 中 class='father' 的元素(div p)
.father {
    color: red;
}

// div 元素选择器 用来选中 HTML 中所有div元素
div{
 color: green;
}

// p 元素选择器 用来选中 HTML 中所有p元素
p{
 color: blue;
}

在html文件里

  • 这两个标签div p都会被 .father 类选择器选中 → 文字变成红色。
  • 虽然它们一个是 <div>，一个是 <p>，但都因为有 class="father" 而被同一个样式规则影响。
html 复制代码 
// div  p 在这里才是元素
//这两个标签元素div  p   因为有 class="father"
//都会被 .father 类选择器选中，作用于这两个标签元素里的文字变成红色。
<div class="father">我是父亲</div>
<p class="father">我也是父亲？</p>

案例2:

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          .red {
            color: red;
        }

        .size {
            font-size: 66px;
        }
    </style>
</head>
<body>
     <!-- 类: 定义 和 使用才能生效 -->
      <!-- 默认样式 没有设置class属性 就没有对应的类选择器 生成css样式 -->
     <p>111</p>  
       <!-- 一个标签的class属性可以定义多个类名 , 需要空格隔开即可 -->
       <p class="red size">222</p>

       <div class="red">这个标签文字也要变红</div>

</body>
</html>

3.id选择器 :

结构：#id属性值{ css属性名：属性值； }

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

  1. 所有标签上都有id属性

2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

3.一个标签上只能有一个id属性值

4.一个id选择器只能选中一个标签

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 定义id选择器:具有唯一性  */
        #blue {
            color: skyblue;
        }
    </style>
</head>
<body>
    <div id="blue">这个div文字是蓝色的</div>
    <p id="blue">111</p>
</body>
</html>

4.通配符选择器：

结构：*{ css属性名：属性值； }

作用：找到页面中所有的标签，设置样式

注意点：

  1. 开发中使用极少，只会在极特殊情况下才会用到

2.在基础班小页面中可能会用于去除标签默认的margin和padding（后续讲解）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>pppp</p>
    <h1>h1</h1>
    <span>span</span>
    <p>pppp</p>
    <h2>h2</h2>
</body>
</html>

class类名与id属性值的区别:

  • class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
  • id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

类选择器与id选择器的区别：

  • 类选择器以 **.**开头
  • id选择器以 **#**开头

5.复合选择器:

5.1 后代选择器

根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素

选中"选择器1 所匹配元素内部的所有符合选择器2 条件的后代元素"。

后代选择器语法：

html 复制代码 
选择器1 选择器2 { css }

选择器1 是祖先元素；

选择器2 是其任意层级的后代元素（不一定是直接子元素）。

先通过选择器1找到一堆标签，在这一推标签的**后代（儿子、孙子、重孙子...）**中找到满足选择器2的标签，设置样式。

注意点：

  1. 后代包括：儿子、孙子、重孙子......

  2. 后代选择器中，选择器与选择器之前通过 空格 隔开

后代选择器:添加选择器1 选择器2的条件

选择器1:

任何合法的 HTML 标签都可以作为选择器1，不管它是否能包含子元素。

注意：

1.如果你使用标签元素作为选择器1, 那么只有可嵌套内容的标签才能作为选择器1

(如 <div>、<section>、<article>、<ul>、<li> 等)

1.伪元素如 ::before 和 ::after 不能作为选择器1，因为它们不是 DOM 树中的实际节点。

html 复制代码 
 img a { ... } /* 不推荐，因为 img 不能包含 a */
  • 虽然你可以写 img a {}，虽然语法上是合法的 CSS, 但是 <img> 是一个 空元素 ，它不能包含其他元素，所以永远不会有任何后代元素满足这个条件,这样写没有意义的。

3.常见不能包含子元素的标签（空元素）不能有内容，自然也不能有后代元素。

这些作为选择器1都是无意义的：

标签 说明
<img> 图片
<input> 表单输入框
<br> 换行符
<hr> 分隔线
<meta> 页面元信息
<link> 外部资源链接
<source> 音视频源
满足**选择器1** **的**类型 示例 含义
元素选择器 div 所有 <div> 元素
类选择器 .box 所有 class 包含 box 的元素
ID 选择器 #main 唯一的 id 为 main 的元素
属性选择器 [type="text"] 所有 type 属性等于 text 的元素
伪类选择器 a:hover 鼠标悬停时的链接
伪元素选择器 p::first-line 段落的第一行（注意：伪元素不能作为选择器1）
组合选择器 nav, .menu 多个选择器用逗号分隔（只能用于规则开头）

选择器2 :

任何合法的 HTML 标签都可以作为选择器2，只要它是选择器1所匹配元素的后代。

类型 示例 含义
元素选择器 p 所有段落元素
类选择器 .highlight class 包含 highlight 的元素
ID 选择器 #title id 为 title 的元素
属性选择器 [href] 所有具有 href 属性的 a 标签
伪类选择器 li:last-child 列表项中的最后一个子元素
伪元素选择器 div::after 在 div 后插入内容（仅限伪元素）
子代选择器 ul > li ul 下的直接子元素 li
相邻兄弟选择器 h1 + p h1 后的第一个 p 元素
通用兄弟选择器 h1 ~ p h1 后面所有同级 p 元素

⚠️ 注意：如果你在后代选择器中使用了 >、+ 或 ~ 等关系符号，则不再是"纯后代选择器"。

选择器1 + 选择器2组合示例
选择器1 选择器2 合法组合示例 效果说明
元素 元素 div``p 所有 div 内部的 p 元素
元素 类 div .content 所有 div 内 class 为 content 的元素
元素 伪类 div p:hover{}
类 元素 .menu ul class 为 menu 的元素内部的所有 ul .menu li {}
类 类 .box .item class 为 box 的元素内部 class 为 item 的元素
ID 元素 #header nav id 为 header 的元素内的 nav
ID 类 #sidebar .link id 为 sidebar 的元素内 class 为 link 的元素 #main .content {}
属性选择器 伪类 [type="text"]:focus 所有 type 为 text 并获得焦点的输入框 input[type="text"]:focus {}
伪类 元素 li:hover span 当鼠标悬停在 li 上时，里面的 span 被选中
伪类 伪类 a:hover .icon 不合法 ❌（伪类不能嵌套后代选择器）

非法组合示例与原因

错误写法 原因
::before span 伪元素::before不能作为选择器1
p::first-line em ::first-line 是伪元素，不能再包含后代
a:hover .icon 伪类（:hover）后面不能接其他选择器形成后代结构
input[type="text"]:required 这是属性选择器和伪类的叠加，并非后代选择器，但也可以合法存在（取决于语义）
选择器类型 可否作为选择器1 可否作为选择器2
元素选择器 ✅ ✅
类选择器 ✅ ✅
ID 选择器 ✅ ✅
属性选择器 ✅ ✅
伪类选择器 ⚠️（部分可以） ✅
伪元素选择器 ❌ ⚠️（仅能单独使用）
选择器1 和 选择器2 的定义：
  • 选择器1：祖先元素或匹配条件。
  • 选择器2：后代元素或进一步筛选条件。
合法组合：
  • 后代选择器：选择器1 + 空格 + 选择器2
  • 交集选择器：选择器1 + 选择器2（无空格）
  • 伪类选择器 ：选择器 + :伪类
非法组合原因：
  • D 嵌套 ID：ID 是唯一的，不应在同一页面多次出现。
  • 伪类不能单独使用：无论是祖先选择器1还是后代选择器2，
    只要使用伪类(:hover)必须依附于某个具体的选择器(元素/类/id选择器)，伪类不能单独使用。
伪类不能单独使用：无论是祖先选择器1还是后代选择器2，

只要使用伪类(:hover)必须依附于某个具体的选择器(元素/类/id选择器)，伪类不能单独使用。

在 CSS 中，伪类（pseudo-class） 是一种特殊的关键词，用于表示元素的某种状态或位置。例如：

  • :hover（鼠标悬停）
  • :focus（获得焦点）
  • :active（被激活时）
  • :nth-child()（特定子元素）

它们必须依附在一个具体的选择器(元素)上

类比:

你可以把伪类想象成一个"状态修饰词"，就像中文里的"正在跑步的人"中的"正在跑步"------它必须依附在一个"人"上才能有意义。

:hover、:focus 等伪类也一样，必须依附在具体的元素、类或 ID选择器 上。

如果你以后看到任何包含伪类的选择器，都可以用你总结的这句话来判断是否合法：

伪类不能单独存在，必须依附于一个具体的选择器。

选择器 合法性 原因
:hover ❌ 非法 伪类没有依附对象
:hover :hover ❌ 非法 两个伪类都没有依附对象
a:hover :hover ❌ 非法 后代中不能单独使用伪类
:hover a:hover ❌ 非法 祖先选择器非法 + 后代选择器结构混乱
:hover .icon ❌ 非法 祖先选择器非法
.icon :hover ❌ 非法 后代选择器中伪类未依附对象
input:focus :checked ❌ 非法 后代中不能使用伪类（尤其是:checked）
选择器 合法性 原因 实际含义
a:hover ✅ 合法 :hover 依附在 a 元素上 当鼠标悬停在 <a> 标签上时生效
.btn:hover ✅ 合法 :hover 依附在 .btn 类上 当鼠标悬停在 class 为 .btn 的元素上时生效
a:hover .icon ✅ 合法 :hover 依附在 a 上，.icon 是后代 当鼠标悬停在 <a> 上时，选中其内部所有 class 为 .icon 的后代元素
div:hover .icon ✅ 合法 :hover 依附在 div 上，.icon 是后代 当鼠标悬停在 div 上时，选中其内部所有 class 为 .icon 的后代元素
input:focus ✅ 合法 :focus 依附在 input 上 当 input 获得焦点时（比如点击或 tab 到）生效
div:hover a:hover ✅ 合法 两个伪类分别依附于 div 和 a 当鼠标同时悬停在 div 和 a 上时生效（但实际是"a 在 div 内部"且被悬停）
div a:hover ✅ 合法 后代选择器，:hover 依附在 a 上 所有 div 内部的 a 被悬停时生效
div:hover .menu span ✅ 合法 :hover 依附在 div 上，.menu span 是后代 当 div 被悬停时，选中 .menu 下的所有 span
#menu:hover .submenu ✅ 合法 :hover 依附在 ID 为 menu 的元素上 当 ID 为 menu 的元素被悬停时，选中其内部 class 为 .submenu 的后代元素
li:hover .submenu a ✅ 合法 :hover 依附在 li 上，.submenu a 是后代 当 li 被悬停时，选中其内部 class 为 .submenu 的元素下的所有 a

合法的关键点：

  1. 伪类必须依附于一个具体的选择器 （如 a、.class、#id）
  2. 可以继续使用后代选择器结构（即：空格 + 子选择器）
  3. 伪类不能单独使用，也不能作为后代选择器中的独立部分
  4. 多个伪类可以共存，只要它们各自都有依附对象
选择器1 类型 选择器2 类型 合法组合示例 组合类型 效果说明 HTML 示例 是否合法
元 素 选 择 器 元素选择器 div p 后代选择器 所有 div 内部的 p 元素 <div><p>Text</p></div> 表示一个 div 包含一个 p，用于 div p 后代选择器。 ✅ 合法
元 素 选 择 器 类选择器 div .content 后代选择器 所有 div 内部 class 为 content 的元素 <div><span class="content">Text</span></div> 表示 div 包含一个 class 为 content 的 span，用于 div .content。 ✅ 合法
元 素 选 择 器 ID 选择器 div #header 后代选择器 所有 div 内部 id 为 header 的元素 <div><h1 id="header">Header</h1></div> 表示 div 包含一个 h1，其 id 为 header，用于 div #header。 ✅ 合法（但不推荐）
元 素 选 择 器 属性选择器 div [type="text"] 后代选择器 所有 div 内部 type 属性值为 text 的元素 <div><input type="text"></div> 表示 div 包含一个 input，其 type="text"，用于 div [type="text"]。 ✅ 合法
元 素 选 择 器 伪类选择器 div :hover 后代选择器 所有 div 内部被悬停的元素 <div><a href="#">Hover me</a></div> 表示 div 包含一个 a，用于测试 div :hover，虽然语法合法但伪类不能单独使用。 ❌ 不合法（伪类不能单独使用作为选择器）
类 选 择 器 元素选择器 .menu ul 后代选择器 class 为 menu 的元素内部的所有 ul <nav class="menu"> <ul> <li>List item</li> </ul> </nav> 表示一个带有 class="menu" 的 nav，里面有一个 ul，用于 .menu ul。 ✅ 合法
类 选 择 器 类选择器 .box .item 后代选择器 class 为 box 的元素内部 class 为 item 的元素 <div class="box"> <spanclass="item"> </span> </div> 表示一个 div 有 class box，其子元素 span 有 class item，用于 .box .item。 ✅ 合法
类 选 择 器 ID 选择器 .sidebar #nav 交集选择器 class 为 sidebar 且 id 为 nav 的元素 <nav id="nav" class="sidebar"> </nav> 表示一个 nav 同时具有 id="nav" 和 class="sidebar"，用于 .sidebar #nav。 ✅ 合法（但不推荐）
类 选 择 器 属性选择器 .input[type="text"] 交集选择器 class 为 input 并且 type 属性值为 text 的元素 <input type="text" class="input"> 表示一个 input 同时具有 type="text" 和 class="input"，用于 .input[type="text"] ✅ 合法
类 选 择 器 伪类选择器 .link:hover 伪类选择器 class 为 link 的元素处于悬停状态时 <a href="#" class="link">Link</a> 表示一个 a 具有 class="link"，用于 .link:hover。 ✅ 合法
ID 选择器 元素选择器 #header nav 后代选择器 id 为 header 的元素内的 nav <header id="header"> <nav>Navigation</nav> </header> 表示一个 header 具有 id="header"，其子元素是 nav，用于 #header nav。 ✅ 合法
ID 选择器 类选择器 #sidebar .link 后代选择器 id 为 sidebar 的元素内 class 为 link 的元素 <aside id="sidebar"> <a href="#" class="link"></a> </aside> 表示一个 aside 具有 id="sidebar"，其子元素是一个 a，具有 class="link"，用于 #sidebar .link。 ✅ 合法
ID 选择器 ID 选择器 #main #content - 两个 ID 不应同时出现在同一元素上 - ❌ 不合法（ID 应唯一）
ID 选择器 属性选择器 #form[type="submit"] 交集选择器 id 为 form 且 type 属性值为 submit 的元素 <input id="form" type="submit"> 表示一个 input 具有 id="form" 和 type="submit"，用于 #form[type="submit"]。 ✅ 合法
ID 选择器 伪类选择器 #button:hover 伪类选择器 id 为 button 的元素处于悬停状态时 <button id="button">Button</button> 表示一个 button 具有 id="button"，用于 #button:hover。 ✅ 合法
属性选择器 元素选择器 [type="text"] span 后代选择器 type 属性值为 text 的元素内部的所有 span <input type="text"> <span>Span Text</span> 表示一个 input 具有 type="text"，后面跟了一个 span，用于 [type="text"] span。 ✅ 合法
属性选择器 类选择器 [type="text"].error 交集选择器 type 属性值为 text 并且 class 为 error 的元素 <input type="text" class="error"> 表示一个 input 具有 type="text" 和 class="error"，用于 [type="text"].error。 ✅ 合法
属性选择器 属性选择器 [type="text"][placeholder="Enter"] 交集选择器 type 属性值为 text 并且 placeholder 属性值为 Enter 的元素 <input type="text" placeholder="Enter"> 表示一个 input 具有 type="text" 和 placeholder="Enter"，用于 [type="text"][placeholder="Enter"]。 ✅ 合法
属性选择器 伪类选择器 [type="text"]:focus 伪类选择器 type 属性值为 text 并获得焦点的输入框 <input type="text"> 表示一个 input 具有 type="text"，用于 [type="text"]:focus。 ✅ 合法
伪类选择器 元素选择器 li:hover span 后代选择器 当鼠标悬停在 li 上时，里面的 span 被选中 <ul><li>Item<span>Hover me</span></li></ul> 表示一个 ul 中的 li，里面有一个 span，用于 li:hover span。 ✅ 合法
伪类选择器 类选择器 :hover .icon :hover 前面没有指定任何元素（如 a、.button 等），导致浏览器无法确定"谁的悬停状态 "会影响 .icon。 这样的写法在 CSS 解析时会被忽略，不会生效。 /* ❌ 伪类:hover缺少依附对象 */ :hover .icon { color: red; } ❌ 不合法 伪类:hover不能脱离主体选择器单独使用
伪类选择器 类选择器 :hover .icon :hover 前面没有指定任何元素（如 a、.button 等），导致浏览器无法确定"谁的悬停状态 "会影响 .icon。 这样的写法在 CSS 解析时会被忽略，不会生效。 ❌ 不合法 伪类:hover不能脱离主体选择器单独使用
伪类选择器 类选择器 a:hover .icon 后代选择器 a:hover .icon { color: red; transform: scale(1.2); } <a href="#"> <span class="icon"> Icon</span> </a> ✅ 合法
伪类选择器 类选择器 a:hover .icon 后代选择器 当鼠标悬停在 <a> 元素上时，其内部所有 class="icon" 的后代元素被选中 a:hover - 匹配鼠标悬停状态的 <a> 元素 (空格) - 后代选择器，表示内部嵌套关系 .icon - 匹配 class 为 "icon" 的元素 ✅ 合法
伪类选择器 类选择器 div:hover .icon 后代选择器 当鼠标悬停在 div 上时，选中其内部所有 class="icon" 的后代元素 <div> <p class="icon"></p> <span class="icon"></span> </div> ✅ 合法
伪类选择器 类选择器 div:hover .icon 后代选择器 当鼠标悬停在 div 上时，选中其内部所有 class="icon" 的后代元素 div:hover 是一个伪类选择器，表示"当 div 被悬停时"。 .icon 是一个类选择器。 中间有一个空格，表示是 后代选择器。 ✅ 合法
伪类选择器 ID 选择器 div:hover #footer 交集选择器 当 div 处于悬停状态时，其内部 id 为 footer 的元素 <div><footer id="footer">Footer</footer></div> 表示一个 div 包含一个 footer，具有 id="footer"，用于 div:hover #footer。 ✅ 合法
伪类选择器 属性选择器 input:focus[type="text"] 交集选择器 当 type 属性值为 text 的输入框获得焦点时 <input type="text"> 表示一个 input 具有 type="text"，用于 input:focus[type="text"]。 ✅ 合法
伪类选择器 伪类选择器 a:hover :hover ❌ 不合法
伪类选择器 伪类选择器 :hover :hover - - ❌ 不合法
div :hover 能作为后代选择器吗?
html 复制代码 
div :hover {}
  • div：是一个元素选择器；
  • :hover：是一个伪类；
  • 中间有空格：表示这是一个后代选择器。虽然语法上看起来像"后代选择器"

所以浏览器会把它解析为："选中所有在 <div> 元素内部的、处于悬停状态的元素"。

在后代选择器中，选择器2 必须是一个完整的选择器（如元素、类、ID 等） ，不能只是一个伪类（如 :hover）。所以:hover 并不能单独作为"选择器2"，

因为伪类 :hover 不能单独作为一个选择器 ，:hover 不是一个"标签"或"元素"，它只是描述某种状态（鼠标悬停），不能脱离具体元素使用 。伪类 :hover必须依附在一个具体的选择器上(可以是元素选择器 ID选择器 类选择器)。

是合法且常用的写法:

html 复制代码 
a:hover {}
p:hover {}
input:hover {}
 div:hover p {}

是不合法/不推荐的:

html 复制代码 
:hover {}

div :hover {}
我给后代选择器的选择器1 或者选择器2 任意一个选择器添加:hover 伪类选择器可以吗? 添加后 还是后代选择器?

完全可以！

组合方式 是否合法？ 示例
仅选择器1 加伪类 ✅ div:hover p {}
仅选择器2 加伪类 ✅ div p:hover {}
两者都加伪类 ✅（合法）⚠️但要谨慎使用 div:hover p:hover {}

| 写法 | 类型 | 实际含义 | 推荐使用？ |

:hover 是一个伪类 。伪类 :hover 不能单独作为一个选择器 ，:hover 不是一个"标签"或"元素"，它只是描述某种状态（鼠标悬停），不能脱离具体元素使用 。伪类 :hover必须依附在一个具体的选择器上(可以是元素选择器 ID选择器 类选择器)。
div :hover 中间有空格 语法上看起来像"后代选择器+伪类选择器" "div 内部所有被悬停的元素"， 而不是"div 本身被悬停"。 ❌ 不合法/不推荐 语义不清 伪类 :hover 不能单独作为一个选择器
div:hover 元素选择器+伪类选择器 当前被悬停的 div 自身 ✅ 合法，作用于div自身样式上
div:hover p 中间有空格 父元素选择器+伪类选择器:hover +后代选择器p 的组合。 div:hover：表示"当鼠标悬停在 div 上" p：表示"这个 div 内部的所有 p 元素" 当鼠标悬停在 <div> 上时，它内部的所有 <p> 元素都会应用该样式。 (强调"整个区域悬停时统一变化") div:hover p { background-color: yellow; } 只要鼠标在 div 上，不管有没有直接悬停在 p 上，p 都会高亮。
div p:hover 中间有空格 父元素选择器+后代选择器p + 伪类选择器:hover 的组合。 div：祖先元素（选择器1） p：后代元素（选择器2） p:hover：表示"选中所有在 div 内部的 p 元素"，并且这些 p 正处于鼠标悬停状态 <div> 中所有的 <p> 元素被鼠标悬停时应用样式。(强调"只对被悬停的 p 生效") div p:hover { color: red; } 当鼠标移到某个 <p> 上时，文字变红。
div:hover p:hover 中间有空格 父元素选择器div+伪类选择器:hover+后代选择器p+伪类选择器:hover组合 div:hover：当鼠标悬停在 div 上 p:hover：同时还要悬停在 p 上 只有当鼠标既悬停在 div 上，又悬停在它的某个 p 子元素上时，才应用样式。 div:hover p:hover { border: 1px solid red; } 只有当两个条件都满足时，才会生效。
后代选择使用案例:
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /* 父选择器div   后代选择器p {} */
      /* 找到div的儿子p设置文字颜色是红色 */
        div p{
            color: red;
        }

         /* 父选择器div   后代选择器a {} */
      /* 找到div的孙子a设置文字颜色是绿色 */
        div a{
            color: green;  
        }
    </style>
</head>
<body>
   <div>这是一个div标签(无后代)</div>

     <!-- 后代: 儿子p  -->
     <div><p>div标签的后代(儿子)p标签</p></div>

      <!-- 后代:  孙子a  -->
     <div><p><a>div标签的后代(孙子)a标签</a></p></div> 

     <!-- 后代: 儿子p  -->
     <!-- 后代:  孙子a  -->
     <div><p>div标签的后代(儿子)p标签<a>div标签的后代(孙子)a标签</a></p></div>


</body>
</html>

5.2子代选择器

根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素

子代选择器语法：

html 复制代码 
选择器1 > 选择器2 { css }

先通过选择器1找到一堆标签,在这一推标签的**子代（儿子）**中找到满足选择器2的标签，设置样式

注意点：

  1. 子代只包括：儿子

  2. 子代选择器中，选择器与选择器之前通过 > 隔开

子代选择器使用案例:
  • div > p 选择了 div 下的所有直接 p 子元素，并将它们的文本颜色设为绿色
  • 在你的 p 标签内部有一个 子标签a 。由于 CSS 的继承特性，除非 a 标签有特定的颜色定义覆盖其父元素（p 标签）的颜色，否则它会继承父元素（p 标签）的颜色(绿色)属性。这就是为什么即使 a 标签不是 div 的直接子元素，它的文本也会显示为绿色的原因。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style> 
      /* div的儿子p标签文字颜色是绿色 */
      div>p {
            color: green;
        }
    </style>

</head>
<body>
    <div>
        父级div
        <p >父级div的儿子p标签</p>
        <p>父级div的儿子p标签  <a >父级div的儿子p标签里面的孙子a标签</a> </p>
    </div>
</body>
</html>
子代选择器 的组合使用案例:

div > p > a {} 是一个 子代选择器 的组合使用。

这条规则只会作用有效与于 <a> 标签， 因为**<a> 标签** 既是 <p> 标签的直接子元素，且这个 <p> 标签也是 <div> 标签的直接子元素。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style> 
      /* div的儿子p标签文字颜色是绿色 */
      div>p {
            color: green;
        }

        div>p>a{
            color: red;
        }   
    </style>

</head>
<body>
    <div>
        父级div
        <p >父级div的儿子p标签 &nbsp <span>父级div的儿子p标签里面的孙子span标签</span> </p>  
        <p>父级div的儿子p标签  &nbsp  <a >父级div的儿子p标签里面的孙子a标签</a> </p>
    </div>
</body>
</html>

后代选择器 和 子代选择器的组合案例:

div > p a {}

div > p a{ } 并不是单独的选择器类型，而是 两个选择器的组合使用.

选择所有位于 <div> 元素下的 直接子元素 <p> ，然后在这个 <p> 元素下，再选择所有 <a> 元素（无论嵌套多少层），并对它们应用样式。

1.> 是 子代选择器

  • 表示"紧接在其父元素下的直接子元素"。
  • div > p 表示：选择所有 作为 <div> 直接子元素的 <p> 元素。
  1. p a 空格是 后代选择器
  • 表示"任何嵌套在前一个元素中的目标元素"，不管嵌套多深。
  • p a 表示：选择所有 在 <p> 元素内部的 <a> 元素，不管是子元素、孙子元素还是更深层嵌套的。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style> 
        /* div的儿子p标签文字颜色是绿色 */
        div>p {
              color: green;
          }
 
         /* 标签p的儿子a标签 孙子标签span  文字颜色都是粉色 */   
          div>p a{
        color:pink;
      }
      </style>
</head>
<body>
    
    <div>
        父级div
        <p>父级div的儿子p标签  &nbsp <a >父级div的儿子p标签里面的孙子a标签 &nbsp<span>标签p的孙子标签span</span>   </a> </p>
    </div>

</body>
</html>

5.3并集选择器: ,隔开

同时选择多个标签，设置相同的样式

并集选择器语法：

html 复制代码 
选择器1 ， 选择器2， 选择器3{ css }

找到 选择器1 和 选择器2 选择器3 选中的标签，设置样式

注意点：

  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>Document</title>

    <style>
        /* p div span h2 文字颜色是红色 */
        /* 选择器1, 选择器2 {} */
        p, div, span,h2 {
            color: red;
        }
    </style>

</head>
<body>
    <h1>h1</h1>

    <h2>h2</h2>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
  
</body>
</html>

5.4交集选择器：紧挨着

同时满足两个或多个选择条件的同一个元素。

在 CSS 中，交集选择器指的是通过组合不同类型的选择器来精确地定位页面上的元素。它允许你根据多个条件来选择元素，这些条件可以是基于类型、类名、ID、属性等。交集选择器通常用于提高样式的特异性，确保样式只应用于满足所有指定条件的元素。

交集选择器语法：

html 复制代码 
选择器1选择器2 { css }

（既又原则）找到页面中 既 能被选择器1选中，又能被选择器2选中的标签，设置样式

注意：

  1. 交集选择器中的选择器之间是紧挨着的，没有空格分隔

  2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面

常见形式：

html 复制代码 
A.B /* 必须是 A 标签，并且具有 class="B" */
<A class="B></A>
html 复制代码 
div.active   /* 表示：既是 <div> 又有 class="active" 的元素 */
<div class="active"></div>
p.highlight  /* 表示：既是 <p> 又有 class="highlight" 的元素 */
<p class="highlight"></p>
元素和类名的交集 选择器

这种选择器要求元素同时匹配一个特定的HTML标签和一个特定的类名。

语法:

元素.类名{}

在这个例子中，只有 <p> 元素且带有 important 类的文本会被设置为红色。而 <span> 虽然也有 important 类，但由于它不是 <p> 元素，所以不会被选中。

html 复制代码 
p.important {
    color: red;
}

<p class="important">这是一个重要段落。</p>
<span class="important">这不是一个段落。</span>
元素和ID的交集 选择器

虽然ID应该是唯一的，但在某些情况下，你可能希望基于元素标签进一步细化选择。

语法：

标签#id { /* 样式规则 */ }

注意：

此方法不推荐使用，因为ID应该是唯一的，最好直接用 #header 来选择。但如果确实需要基于类型进一步筛选，则可以这样做。

html 复制代码 
<div id="header">这是头部</div>
<p id="header">这不是头部</p>

div#header {
    background-color: blue;
}
类名之间的交集 选择器

你可以将同时多个类名结合在一起，以更精确地定位元素。

语法：

.class1.class2 { /* 样式规则 */ }
在这个例子中，只有同时包含 note类名 和 important 类名 的 <p> 元素会被应用样式。

html 复制代码 
<p class="note important">这是一个重要的注释。</p>
<p class="note">这是一个普通的注释。</p>
<p class="important">这是一个重要的文本。</p>

.note.important {
    font-weight: bold;
    color: red;
}

元素div 元素p 这2个元素不能组成交集选择器

那能组合成那些选择器?

元素div 元素p 这2个元素不能同时组成交集选择器

交集选择器是:一个元素同时满足多个条件。这里是2个不同元素了,不符合交集选择器的规则

html 复制代码 
 //html不识别这个divp
<divp><divp>

改正:1.元素div 类.p可以组成交集选择器

html 复制代码 
<div class="p"><div>

2.元素div 元素p组成并集选择器

html 复制代码 
div, p {
  color: blue;
}

|--------------|-------|-----------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------|
| 写法 | 类型 | 含义 | 是否合法 |
| div | 元素选择器 | 所有 <div> 元素 | ✅ 是 |
| p | 元素选择器 | 所有 <p> 元素 | ✅ 是 |
| divp | 元素选择器 | <divp> 标签（非标准） | ❌ 不是合法 HTML |
| | | | |
| div p | 后代选择器 | 选择<div>标签元素 内部的所有 后代元素<p> | ✅ 是 |
| div > p | 子代选择器 | 选择了 <div>标签元素内部的所有直接 子元素p (非直接子元素p不会被选择) | ✅ 是 /* div元素的直接儿子p标签文字颜色是绿色 */ div>p {color: green; } |
| div,p | 并集选择器 | 同时选中所有 <div> 和 <p>标签元素 div, p { color: blue;} | ✅ 是 |
| div.my-class | 交集选择器 | 只有是 <div>标签元素 并且有类名 class="my-class" 的标签元素会被选择 其他的都不会被选择 div.my-class { color: red; } | ✅ 是 <div class="my-class"></div> <div></div> <p class="my-class"></p> |

衍生 如果p不是标签元素 是个class="p"类呢？

|---------|-------|-------------------------------------------------------------|-------------------------------------------------------------------------------------------------|
| 写法 | 类型 | 含义 | 是否合法 |
| div | 元素选择器 | 所有 <div> 元素 | ✅ 是 |
| .p | 类选择器 | 所有 class="p" 的元素 | ✅ 是 |
| div.p | 交集选择器 | 必须是 <div> 并且 class="p" 的标签元素才会被选择 div.p { color: red; } | ✅ 是 <div class="p"></div> <p class="p"></p> <a class="p"><a> |
| div .p | 后代选择器 | 选择 <div> 内部的 所有class="p" 的元素 | ✅ 是 <div> <div class="p"><div> <p class="p"></p> <a class="p"><a> </div> |
| div, .p | 并集选择器 | 选择所有 <div>元素 和所有 class="p" 元素 | ✅ 是 <div class="p"><div> <div ><div> <p class="p"></p> <a class="p"><a> |

后代选择器VS交集选择器VS并集选择器区别

|-------|--------------------------------|----------------------------|------------------------------------------|---------------------------------------|----------------------------------------------------------------|
| 选择器类型 | 关键区别 | 含义 | LESS 写法 | 编译后 CSS 写法 | 示例 HTML 结构 |
| 后代选择器 | 空格表示层级关系，匹配一个父元素内的另一个子元素 | 选中某个元素内部的另一个子元素。 | div { .b { ... } } 或 div { & .b {...} } | div .b { ... } div元素选择器与.b类选择器之间有空格隔开 | <div> <span class="b"> 内容 </span> </div> |
| 后代选择器 | "父亲里面的儿子" ------ 父元素内的子元素。 | 可以是任意层级的嵌套。 | div { .b { ... } } 或 div { & .b {...} } | div .b { ... } div元素选择器与.b类选择器之间有空格隔开 | <div> <span class="b"> 内容 </span> </div> |
| 后代选择器 | 比喻:父子之间闹矛盾 之间产生距离隔隙 | 可以是任意层级的嵌套。 | div { .b { ... } } 或 div { & .b {...} } | div .b { ... } div元素选择器与.b类选择器之间有空格隔开 | <div> <span class="b"> 内容 </span> </div> |
| 交集选择器 | **没有空格，**表示同一个元素上存在多个类名 | 选中同时具有多个类或属性的同一个元素 | div { &.b { ... } } | div.b { ... } | <div class="b"> 内容</div> 或 <div class="div b">内容</div> |
| 交集选择器 | **没有空格，**表示同一个元素上存在多个类名 | 类似于逻辑"与"操作。 | div { &.b { ... } } | div.b { ... } | <div class="b"> 内容</div> 或 <div class="div b">内容</div> |
| 并集选择器 | **使用逗号分隔，**表示多个独立的选择器共享相同的样式 | 选中多个不同的独立选择器，并为它们应用相同的样式规则 | div, .b { ... } | div, .b { ... } | <div>内容</div> 和 <span class="b">内容</span> |
| 并集选择器 | **使用逗号分隔，**表示多个独立的选择器共享相同的样式 | 类似于逻辑"或"操作。 | div, .b { ... } | div, .b { ... } | <div>内容</div> 和 <span class="b">内容</span> |

如何区分这些选择器？
  1. 看是否有空格：
  • 空格 ：后代选择器（.ancestor .descendant）
  • 无空格 ：交集选择器（.class1.class2）
  1. 看是否有逗号：
  • 逗号 ：并集选择器（.selector1, .selector2）
  1. 看是否使用 &：
  • & 直接跟类名 ：交集选择器（&.class）
  • & 后面有空格再跟类名 ：后代选择器（& .class）
后代选择器案例1:

在less文件中

css 复制代码 
.father {
    .son2 {
        color: blue;
    }
}

编译后的 CSS：

css 复制代码 
.father .son2 {
    color: blue;
}

HTML 示例：

html 复制代码 
<div class="father">
    <div class="son2">背景颜色变黄。</div>
</div>

.son2 是 .father 的后代选择器

表示"所有在 .father 元素内部的 .son2 元素"

后代选择器案例2:

在less文件中

html 复制代码 
.father {
    & .son2 {
        color: blue;
    }
}

编译后的 CSS：

css 复制代码 
.father .son2 {
    color: blue;
}

HTML 示例：

html 复制代码 
<div class="father">
    <div class="son2">背景颜色变黄。</div>
</div>

& 表示 .father

& .son2 → .father .son2

中间有空格 这是一种显式写法，更清晰地表明了是后代选择器

.son2 是 .father 的后代选择器

表示"所有在 .father 元素内部的 .son2 元素"

交集选择器案例:

在less文件中

css 复制代码 
.father {
    &.son2 {
        color: red;
    }
}

编译后的 CSS：

css 复制代码 
.father.son2 {
    color: red;
}

HTML 示例：

html 复制代码 
<button class="father son2">边框变蓝。</button>

& 表示 .father

&.son2 → .father.son2

中间没有空格 .father.son2是交集选择器

这表示一个元素同时具有 class="father son2"，即两个类名都在同一个元素上

不是父子关系，而是同一个元素拥有两个类名

并集选择器案例:

在less文件中

css 复制代码 
.father{
 .son3,.son4{
  font-size: 24px;
 }

}

编译后的 CSS：

html 复制代码 
.father .son3,
.father .son4 {
  font-size: 24px;
}

HTML 示例：

html 复制代码 
<div class="father"> 
  <div class="son3"></div>
   <div class="son4"></div>
</div>

.son3,.son4=.father .son3,.father .son4 并集选择器

.son3类选择器 是.father类选择器的后代选择器

.son4类选择器 是.father类选择器的后代选择器

写法 类型 含义 示例 HTML
.father { .son2 { ... } } 后代选择器 .father .son2``{ } <div class="father"> <div class="son2"></div> </div>
.father { & .son2 { ... } } 后代选择器 .father .son2``{ } <div class="father"> <div class="son2"></div> </div>
.father { &.son2 { ... } } 交集选择器 .father.son2{} <div class="father son2"></div>
.father{ .son3,.son4{ } } 并集选择器 .father .son3, .father .son4 { ... } <div class="father"> <div class="son3"></div> <div class="son4"></div> </div>
后代选择器交集选择器并集选择器综合使用案例:

|--------------------------------------------|-----------------------------------------------|--------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| less写法 | 类型 | 编译后 CSS | 含义 |
| header { .icon-left { ... } } | 后代选择器（隐式） | header .icon-left {} | 在html中所有 header 元素内部的 class ="icon-left" 的子元素 被选中样式 |
| header { & .icon-left2 { ... } } | 后代选择器（显式） | header .icon-left2 {} | 在html中所有 header 元素内部的 class ="icon-left2" 的子元素 被选中样式 |
| header { & .icon-left2 { ... } } | 因为明确地用了 & | header .icon-left2 {} | 在html中所有 header 元素内部的 class ="icon-left2" 的子元素 被选中样式 |
| header { &.icon-left3 { ... } } | 交集选择器 | header.icon-left3 {} | 在html中 必须是 header 元素并且同时具有 class="icon-left3" 的元素(就是header) 被选中样式 <header class="icon-left3"> </header> |
| header { .icon-left4, .icon-left5{ ... } } | header .icon-left4, header .icon-left5 是并集选择器 | header .icon-left4, header .icon-left5 {} | 在html中 header标签元素里的 类class="icon-left4"的后代元素 和 类class="icon-left5"的后代元素 才会被选中 <header> <div class="icon-left4"></div> <p class="icon-left5"></p> </header> |
| header { .icon-left4, .icon-left5{ ... } } | header .icon-left4 是后代选择器（隐式） | 在 <header> 元素内部选中所有 class ="icon-left4" 的元素。 | 在html中 header标签元素里的 类class="icon-left4"的后代元素 和 类class="icon-left5"的后代元素 才会被选中 <header> <div class="icon-left4"></div> <p class="icon-left5"></p> </header> |
| header { .icon-left4, .icon-left5{ ... } } | header .icon-left5 是后代选择器 （显式） | 在 <header> 元素内部选中所有 class ="icon-left5" 的元素 | 在html中 header标签元素里的 类class="icon-left4"的后代元素 和 类class="icon-left5"的后代元素 才会被选中 <header> <div class="icon-left4"></div> <p class="icon-left5"></p> </header> |

在less

css 复制代码 
/* header元素选择器 */
header{
     /* .icon-left  ->    header .icon-left    叫后代选择器（隐式） 
        */
    .icon-left {
        font-size: (22px);
    }

    /*    & .icon-left2  ->  header .icon-left2  带有空格  叫显示后代选择器 （显式）
        */
    & .icon-left2{
         font-size: (23px);
    }

    /* &.icon-left3 ->  header.icon-left3  没有空格  叫着交集选择器 
        */
   &.icon-left3{
         font-size: (24px);
    }

  
    /*
   .icon-left4,& .icon-left5 -> header .icon-left4, header .icon-left5 是并集选择器
     
  .icon-left4 -> header .icon-left4 是后代选择器（隐式）
   & .icon-left5 -> header .icon-left5 是后代选择器（显式）
 */
 .icon-left4,
 & .icon-left5{
font-size: (25px);
 }   

}

在css中

css 复制代码 
/* header元素选择器 */
header {
  }
header .icon-left {
  font-size: 22px;
}
header .icon-left2 {
  font-size: 23px;
}
header.icon-left3 {
  font-size: 24px;
}
header .icon-left4,
header .icon-left5 {
  font-size: 25px;
}

在html中

html 复制代码 
<header>
<div class="icon-left"></div>
<div class="icon-left2"></div>
<header class="icon-left3"></header>

<div class="icon-left4"></div>
 <p class="icon-left5"></p>

</header>

5.5hover伪类选择器

作用：
:hover 是 CSS 中的一种 伪类（pseudo-class） ，它用于在用户将鼠标指针悬停在某个元素上时，应用特定的样式给这个元素。

基本语法法：

html 复制代码 
selector:hover {
    /* 鼠标悬停时的样式 */
}

在 CSS 中，:hover 伪类可以与各种类型的选择器结合使用，以实现当用户将鼠标悬停在元素上时应用特定的样式。

1.``selector 可以是任何合法的 CSS 选择器。

  • selector 是标签选择器（如 a, div, span）

  • selector 是类选择器（如 .className）

  • selector 是ID选择器（如 #idName）

  • selector 是属性选择器（如 [type="text"]）

  • selector 是子代选择器(仅直接子元素 div > p:hover )

  • selector 是后代选择器(所有后代中符合条件的 a div a:hover )

  • selector 是多类名交集选择器(必须同时拥有这两个类 .box.highlight:hover )

  • selector 是组合选择器(多个选择器统一处理 a:hover, button:hover )

2.:hover：当鼠标悬停在这个选择器选中的元素上时，就会应用括号里的样式。

注意事项：

  1. 伪类选择器选中的元素的某种状态

2. :hover 在手机上不生效怎么办？移动设备通常不支持 :hover，可以考虑使用 JavaScript 或 :active 替代

3.:hover 被其他样式覆盖了怎么办？检查特异性（specificity），确保你的 :hover 规则优先级更高。

4.如何让 :hover 动画更平滑？使用 transition 属性实现平滑过渡。

常见的伪类有：

伪类 含义
:hover 鼠标悬停时的状态
:active 元素被激活时（如点击）
:focus 元素获得焦点时
:visited / :link 链接的不同状态
:nth-child() 选择第 n 个子元素
:hover 什么时候应该写在父容器上 ？什么时候写在子元素上?

是否将 :hover 写在父容器上，取决于你的交互设计目标。

如果希望"整体联动感应"、"联动动画"，就写在父容器；

如果希望"局部响应"、"各自独立"，就直接写在子元素上。

|----------------------|---------------------|------------------|
| 写法 | 触发方式 | 适用场景 |
| .father:hover .child | 鼠标悬停在父元素任意位置触发子元素变化 | 整体感应，如菜单展开、动画触发等 |
| .child:hover | 鼠标悬停在子元素上才触发 | 局部感应，如按钮悬停变色等 |

:hover推荐写在父容器上的情况：

:hover 父级控全局

|------------------|-----------------------|---------------|
| 场景 | 原因 | 示例 |
| 需要整体感应触发效果 | 用户悬停整个区域时就触发子元素变化 | 双开门动画、导航菜单展开等 |
| 子元素本身可能被隐藏或移出可视区 | 如果只对子元素写 hover，用户很难触发 | 折叠面板、侧边栏动画 |
| 多个子元素联动 | 在父容器悬停任意一个区域，多个子元素一起动 | 动画组合、按钮组交互 |

如果你对 .father:hover .left 设置动画：

只要鼠标在 .father 范围内，不管在哪，.left 和 .right 就会一起动；

鼠标悬停在整个门前，门就打开 触发面积大，用户更容易操作,动画更加自然流畅。

html 复制代码 
.father:hover .left,
.father:hover .right {
    transform: translate(...);
}



+----------------------------+
|           father           |
|   +--------+ +--------+    |
|   | .left  | | .right |    |
|   +--------+ +--------+    |
+----------------------------+
:hover推荐写在子元素上的情况：

:hover 子级限局部；

|---------------------|-----------------------|-------------|
| 场景 | 原因 | 示例 |
| 只想控制单个子元素的状态变化 | 不希望影响其他子元素 | 单个按钮悬停变色 |
| 每个子元素有独立的交互逻辑 | 不同子元素需要不同的触发条件 | 多个图标分别放大、旋转 |
| 使用了 JavaScript 控制状态 | CSS 的 hover 和 JS 行为冲突 | 自定义组件、轮播图等 |

html 复制代码 
.left:hover {
    transform: scale(1.2);
}

.right:hover {
    background-color: red;
}
:hover写在父容器上-双开门案例
  1. 双开门动画（推荐用父容器试用 :hover）

当鼠标悬停在父容器上时，通过 transform: translate 左右移动来改变子元素的位置，模拟出"双开门"的效果。

把 :hover 写在父容器上（.father:hover .left），是为了让"鼠标悬停在整个父容器区域"时就触发动画效果；

而如果写在子元素上（.left:hover），则只有"鼠标悬停在子元素本身"时才会触发。

优点：

用户更容易触发动画；用户鼠标放在整个门区域就能开门；

更适合"整体感应"的交互设计（比如"双开门"效果）；

用户体验更好，不需要精准悬停在子元素上。不会出现"开一半又关掉"的尴尬。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>


/* .father设置 display: flex; 后，.father 成为了一个 Flex Container。
.left 和 .right 作为直接子元素成为了 Flex Items。
因为 flex-direction 的默认值是 row，所以这些子元素会沿着水平方向（从左到右）依次排列。
子元素 .left 和 .right 都被设置了 width: 50%;，这意味着每个子元素占据父容器宽度的一半，刚好可以并排显示在同一行。
 */
   *{
    padding: 0;
    margin: 0;
   }

    /* 1. 布局：父子结构，父级是大图，子级是左右小图 */
 .father {
     display: flex;
   flex-direction:row;     /* 默认值是 row，所以这些子元素会沿着主抽水平方向（从左起点到右）依次排列。 */
     margin: 0 auto;
     width: 1366px;
     height: 600px;
    background-image: url(./images/bg.jpg);
    overflow: hidden;   /*隐藏溢出的内容 */
 }

.father .left,
.father .right{
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            transition: all .5s;
}




/*  .left 取最左边的背景图片fm.jpg */
.father .left{
   background-position: left 0;
}

/*  .right 取最右边的背景图片 fm.jpg*/
.father .right{
background-position: right 0;
}


 /* 2.  双开门动画（推荐用父容器试用 :hover）
   当鼠标悬停在父容器上时，通过 transform: translate 左右移动来改变子元素的位置，模拟出"双开门"的效果。
   
   把 :hover 写在父容器上（.father:hover .left），是为了让"鼠标悬停在整个父容器区域"时就触发动画效果；
    而如果写在子元素上（.left:hover），则只有"鼠标悬停在子元素本身"时才会触发。
   
优点：
 用户更容易触发动画；用户鼠标放在整个门区域就能开门；
更适合"整体感应"的交互设计（比如"双开门"效果）；
用户体验更好，不需要精准悬停在子元素上。不会出现"开一半又关掉"的尴尬。

 */
 .father:hover .left {  transform: translate(-100%); }  

.father:hover .right { transform: translateX(100%);}




</style>
<body>
     <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
单一 元素选择器 +伪类选择器 :hover的组合

a:hover：当用户将鼠标悬停在 <a> 标签上时，链接的颜色变为红色，并添加下划线,背景为绿色。

  • a是元素选择器；
  • :hover 是伪类选择器；
  • 它们组合在一起形成一个完整的元素选择器 + 伪类选择器的组合 ：a:hover；
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /* 标签选择器 + :hover */
        a:hover {
               text-decoration: underline;
                color: red;
                background-color: green;
                }
    </style>
</head>
<body>
    <a href="#">这是超链接</a>
</body>
</html>
类选择器 +伪类选择器 :hover

.button:hover：当用户将鼠标悬停在带有 class="button" 的按钮上时，按钮变成绿色，变成圆角 文字变为白色 鼠标变成等待状态。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /* 类选择器  */
                .button{
            width: 100px;
            height: 50px;
            background-color: #e0e0e0; /* 默认背景颜色 */
            color: black; /* 默认文本颜色 */
             padding: 10px 20px; /* 内边距 */
             border-radius: 5px; /* 圆角 */
             cursor: default; /* 默认光标 */
             transition: all 0.3s ease; /* 平滑过渡效果 */
         }

       /* 类选择器 + :hover   */
       .button:hover{
        width: 200px; /*  */
        height: 100px;  /*  */ 
        background-color: #4CAF50; /*悬停时背景颜色 */
        color: white;    /* 悬停时文本颜色  */  
        padding: 10px 20px 15px 25px;  /* 悬停时内边距   即内容与边框之间的空间。 */
        border-radius: 5px; /*  悬停时圆角  设置元素(button标签)的圆角半径。*/
        cursor: wait;  /* 悬停时光标  改变鼠标指针的形状。 default（默认箭头） pointer 表示手型光标   text（I形光标，用于文本输入区域）、wait（等待状态的沙漏图标） */ 
       }


    </style>
</head>
<body>
    <button class="button">登录</button>
</body>
</html>

ID选择器 + 伪类选择器:hover

页面加载时：

图片会水平和垂直居中显示在页面的中央位置。

图片的初始宽度被设置为100像素。

当鼠标悬停在图片上时：

在悬停状态下，图片会被放大到原来的2.0倍大小。这种变化是通过 transform: scale(2.0) 实现的，并且由于 transition 属性的存在，放大过程会显得非常流畅。scale 函数接受一个或两个参数（分别表示X轴和Y轴的比例），这里我们只提供了一个参数，意味着在X轴和Y轴上都按相同的比例缩放。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
       /* 使用 Flexbox 让父容器中垂直居中 */
       .div-container{
        display: flex;  /* 启用 Flexbox 布局，使子元素可以灵活地排列。 */ 
        justify-content: center; /* 水平居中对齐div下的所有直接子元素。 */
        align-items: center; /* 垂直居中对齐div下的所有直接子元素。 */
        height: 100vh; /* 设置div容器的高度为视口高度的100%，确保它可以占据整个屏幕的高度，从而实现垂直居中。 */
        margin: 0; /* 移除默认的外边距，避免不必要的空白。 */
       background-color: aqua;  
    }
    

       /* 设置图片的基本样式 */
       #centered-image{
        display: block;   /* 将图片作为块级元素显示，这样可以更容易地控制其布局。 */   
        margin: 0 auto; /* 设置左右外边距为自动，使图片水平居中。这是最简单的方式之一，适用于单个图片或块级元素。 */
        width: 100px; /* 设置图片的宽度为100像素。你可以根据需要调整这个值。 */
        transition: transform 0.3s ease; /* 定义一个过渡效果，当 transform 属性发生变化时，变化会在0.3秒内平滑完成。ease 是一种缓动函数，使动画开始缓慢，然后加速，最后减速结束。 */
      }
    
    
      /* ID选择器 + :hover */
        #centered-image:hover{
            transform: scale(2.0); /* 在悬停状态下，图片会被放大到原来的2.0倍大小。*/ 
            cursor: wait;
            }


    </style>
</head>
<body>
    
    <a href="#">这是超链接</a>
    <br> <br>
    <button class="button">登录</button>
    <br> <br>
    <!-- 创建一个容器用于垂直居中 -->
     <div class="div-container" >
         <!-- 使用 img 标签插入图片 -->
        <img id="centered-image" src="./images/3.jpg" alt="图片加载失败" />
     </div>
   
 
</body>
</html>
属性选择器 + 伪类选择器:hover

input[type="submit"]:hover选择器

  • input[type="submit"]: 是一种组合选择器，它结合了 标签选择器 (input)和 属性选择器 ([type="submit"]) ，确保只对 <input> 类型为 submit 的元素应用样式。
  • :hover:当用户将鼠标悬停在 type="submit" 的输入框上时，背景变红，文字变白。

注意:

如果你尝试仅使用 [type="submit"]:hover，可能会导致意外的行为，因为这个选择器不仅适用于 <input> 元素，还可能应用于任何其他具有 type="submit" 属性的元素（尽管这种情况很少见）。

为什么需要 input 标签名？

  1. 增加特异性 ：仅使用 [type="submit"] 可能会匹配到所有带有 type="submit" 属性的元素，而不仅仅是 <input> 元素。虽然 HTML 规范中 type 属性主要用于 <input> 元素，但理论上其他元素也可能包含类似的属性（尽管这不常见）。

  2. 提高性能 ：浏览器解析 CSS 选择器时，从右向左进行匹配。这意味着如果只使用 [type="submit"]，浏览器需要检查每个元素(标签)是否具有该属性。而使用 input[type="submit"]，则可以先筛选出所有的 <input> 元素，然后再检查这些元素是否有 type="submit" 属性，这样可以减少不必要的检查，提升性能。

  3. 明确意图 ：通过明确指定 input 标签，代码更具可读性，表明我们只想对 <input> 元素应用样式，而不是其他类型的元素。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     /* 属性选择器 + :hover  */
     input[type="submit"]:hover {
      background-color: #f44336;
      color: white;
    }
    </style>
</head>
<body>
     <input type="text" value="这是一个文本输入框"><br>
     <input type="submit" value="提交表单" /> 
</body>
</html>

子代选择器 + 伪类选择器:hover

只对某个父元素下的直接子元素设置悬停效果。

div>p:hover{}

只有div的直接子元素p 鼠标悬停生效 其他的非p直接子元素(span) 鼠标悬停无效
只有第一个 <p> 会变蓝色，这里p是div的直接子元素

第二个 <p> 不会变蓝色，因为它不是 div 的直接子元素。

html 复制代码 
    <style>
    /*  子代选择器 + :hover */
    /*   只有div的直接子元素p 鼠标悬停生效   其他的直接子元素(span)  鼠标悬停无效  */
    div>p:hover{
        color: blue;
    }

    </style>


<body>
     <div>
        <p>我是 div 的直接子元素 p(鼠标悬停生效)</p>
        <!--   CSS具有继承性 因为 直接子元素p 鼠标悬停生效  所以P的子元素标签span  鼠标悬停我也效 -->
         <p>我是 div 的直接子元素 p(鼠标悬停生效)  <span>我不是 div 的直接子元素(div的孙元素) (鼠标悬停我也效)  </span></p> 


         <span><p>我不是 div 的直接子元素</p></span>    

     </div>

</body>
后代选择器 +伪类选择器 :hover

公式:

html 复制代码 
祖先选择器 后代选择器:伪类 { ... }

鼠标悬停生效于某个元素(标签)内部的指定的这个后代元素(无论这个后代标签是子标签 孙标签 重孙标签都有效)。

html 复制代码 
 div a:hover {}
.menu li:last-child {}
#nav ul > li:hover {}
div p:hover {} 是一个典型的 父元素选择器+后代选择器p + 伪类选择器:hover 的组合。

在 div 元素内部的所有后代 <p> 元素中，当鼠标悬停在某个后代元素 <p> 上时，应用该样式。

伪类:hover是加在 后代元素p上的，而不是整个"元素 + 伪类"的结构。

部分 类型 含义
div 元素选择器 所有 <div> 元素
p 元素选择器 所有 <p> 元素
:hover 伪类 鼠标悬停状态
div p:hover 是后代选择器 + 伪类的组合 伪类 :hover是作用在 p 上的 div 下的 p 元素在鼠标悬停时的样式
div:hover p {} 是一个典型的 父元素选择器+伪类选择器:hover +后代选择器p 的组合。

示例：所有嵌套在 div 元素内的后代元素 a被 鼠标悬停状态时都会变色

html 复制代码 
 <style>
  /* 后代选择器 + :hover */
     div a:hover{
        background-color: green;
        color: rgb(70, 4, 70);
      }
    </style>


  <!-- 两个链接都会变紫色，因为它们都在 div 内部。 -->
            <div>
                <a href="#">一级链接</a>
                <p><a href="#">二级链接</a></p>
                <span><p><a href="#">三级链接</a></p></span>
              </div>
多类名交集选择器 + 伪类选择器:hover

仅当元素同时拥有多个类时才触发悬停效果。

示例：同时同时具有 .box 和 .highlight 类名的元素标签才会变色

html 复制代码 
 <style>
/*  多类名交集选择器 + :hover */
  .box.highlight:hover {
      background-color: yellow;
    }
  </style>


              <div class="box highlight">我会变黄</div>
              <div class="box">我不会变色</div>
              <div class="highlight">我也不会变色</div>
组合选择器 + 伪类选择器:hover

给多个不同的元素统一设置悬停效果

示例：所有 a 和 button 在 hover 时都加阴影

html 复制代码 
 <style>
 /*  组合选择器 + :hover  */
    a:hover,
    button:hover {
      box-shadow: 0 0 5px rgba(0,0,0,0.3);
    }
    </style>


  <a href="#">链接</a>
  <button>按钮</button>

5.6结构伪类选择器

结构伪类选择器是 CSS 选择器的一种，允许你根据元素在其位置上的上下文来选择它们，而无需依赖于类名或 ID。这些结构伪类选择器提供了更灵活和动态的方式来定位页面中的元素。

作用与优势：

  1. 作用：根据元素在HTML中的结构关系查找元素

  2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁

  3. 场景：常用于查找某父级选择器中的子元素

常见的结构伪类选择器

|--------------------------------------------|------------------------------|
| 结构伪类选择器 | 说明 |
| E:first-child {} (E 是子元素) | 选择直接父元素中的第一个子元素E。并且是E元素 |
| E :last-child{} (E 是子元素) | 选择直接父元素中的最后一个子元素E。并且是E元素 |
| E**:nth-child(n){}** (E 是子元素 ) | 选择直接父元素中的第n个子元素E。并且是E元素 |
| E**:nth-last-child(n){}** (E 是子元素) | 选择直接父元素中的倒数第n个子元素E。并且是E元素 |
| E:nth-of-type(n){} (E 是子元素) | 只在直接父元素的同类型(E)子元素范围内,匹配选择第n个 |

注意点:

①E的注意点:

  • E 是 直接父元素下的子元素；
  • E是其直接父元素下的第一个子元素 （E:first-child）
  • E是其直接父元素下的最后一个子元素 （E:last-child）；
  • E本身还必须是 E 类型的标签（如 div、li、p 等）。

②n的注意点:

  1. n为：0、1、2、3、4、5、6、......
  2. 通过n可以组成常见公式

|----------|---------------|
| 功能 | 公式 |
| 偶数 | 2n,even |
| 奇数 | 2n+1,2n-1,odd |
| 找到前5个 | -n+5 |
| 找到从第5个往后 | n+5 |

结构伪类选择器案例:
html 复制代码 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

          * {
            margin: 0;
            padding: 0;
        }

         /* 去掉列表的装饰符号 */
         ul {
            list-style: none;
        }  


        /* 选择父元素中的第一个子元素。 */
       li:first-child{
         background-color: green;
       }

       /* 选择父元素中的最后一个子元素。 */
     li:last-child{
        background-color: lightgreen;
     }

   /*  选择父元素中的第n个子元素。 n=5 选择父元素中的第5个子元素 */
     li:nth-child(5){
        background-color: blue;
     }

   /* 选择父元素中的倒数第n个子元素 n=2 选择父元素中的倒数第2个子元素 */
   li:nth-last-child(2){
      background-color: lightblue;
   }



    </style>
</head>
<body>
    
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</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>Document</title>
    <style>

          * {
            margin: 0;
            padding: 0;
        }

         /* 去掉列表的装饰符号 */
         ul {
            list-style: none;
        }  


        /*  选择父元素中排列是2n(偶数)的子元素。     */
       /* li:nth-child(2n){
        background-color: blue;
        } */

         /*  选择父元素中排列是2n+1(奇数)的子元素。     */
        /* li:nth-child(2n+1){
        background-color: blue;
        }   */

          /*  选择父元素中排列是4n(4的倍数)的子元素。     */
         li:nth-child(4n){
        background-color: blue;
        }   


    </style>
</head>
<body>
    
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>

</body>
</html>

03.1-选择器-结构伪类-案例-a:first-child{}

a:first-child{ }

选中那些 既是 <a> 元素，同时又是其父元素的 第一个子元素a

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

         * {
            margin: 0;
            padding: 0;
        }

         /* 去掉列表的装饰符号 */
         ul {
            list-style: none;
        }  


  /* 选中那些 既是 <a> 元素，同时又是其父元素的 第一个子元素a   */
        a:first-child{
         background-color: lightblue;
       } 
    </style>
</head>
<body>

     <ul>
        <li>   
           <a href="#">这是第1个li里面的a1</a>      <!--第一个 <li> 中的第一个 <a>会被选中 lightblue -->
            <a href="#">这是第1个li里面的a2</a>    <!--第一个 <li> 中的其他 <a> 标签都不是第一个子元素（第一个已经是上面那个 <a> 了），所以它们不会被选中。 -->
            <a href="#">这是第1个li里面的a3</a>
            <a href="#">这是第1个li里面的a4</a>
            <a href="#">这是第1个li里面的a5</a>
        </li>
        <li><a href="#">这是第2个li里面的a</a></li>    <!-- 这个 <a> 是 <li> 的第一个子元素； 会被选中 lightblue  -->      
        <li><a href="#">这是第3个li里面的a</a></li>    <!-- 这个 <a> 是 <li> 的第一个子元素； 会被选中 lightblue  --> 
        <li><a href="#">这是第4个li里面的a</a></li>   <!-- 这个 <a> 是 <li> 的第一个子元素； 会被选中 lightblue  --> 
        <li><a href="#">这是第5个li里面的a</a></li>   <!-- 这个 <a> 是 <li> 的第一个子元素； 会被选中 lightblue  --> 
        <li><a href="#">这是第6个li里面的a</a></li>   <!-- 这个 <a> 是 <li> 的第一个子元素； 会被选中 lightblue  --> 
        <li><a href="#">这是第7个li里面的a</a></li>   <!-- 这个 <a> 是 <li> 的第一个子元素； 会被选中 lightblue  --> 
        <li><a href="#">这是第8个li里面的a</a></li>     <!-- 这个 <a> 是 <li> 的第一个子元素； 会被选中 lightblue  -->  
    </ul>


    
</body>
</html>
03.2-选择器-结构伪类-案例-li a:first-child{}

li a:first-child {}

在 每一个<li> 元素内部； 选中那些 <a> 元素，同时又是其直接父元素(li)的 第一个子元素

  • 在每一个 <li>中找到第一个子元素a，
  • 检查 每一个 <li> 内部的第一个子元素如果是 <a>，都会被选中。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

         * {
            margin: 0;
            padding: 0;
        }

         /* 去掉列表的装饰符号 */
         ul {
            list-style: none;
        }  
  
    /* 在 每一个<li> 元素内部；  选中那些 <a> 元素，同时又是其直接父元素(li)的 第一个子元素   */ 
     /*  在每一个 <li>中找到第一个子元素a，    */
     /*  检查  每一个 <li> 内部的第一个子元素如果是 <a>，都会被选中。  */
       li a:first-child {
       background-color: lightblue;
       } 
    </style>
</head>
<body>

     <ul>
        <li>   
           <a href="#">这是第1个li里面的a1</a>     <!--在这个 <li> 中   a 是直接父元素（<li>）的第一个子元素 会被选中 lightblue -->       
            <a href="#">这是第1个li里面的a2</a>    <!--在这个 <li> 中的其他 <a> 标签都不是第一个子元素（第一个已经是上面那个 <a> 了），所以它们不会被选中。 -->
            <a href="#">这是第1个li里面的a3</a>
            <a href="#">这是第1个li里面的a4</a>
            <a href="#">这是第1个li里面的a5</a>
        </li>
        <li><a href="#">这是第2个li里面的a</a></li>    <!-- 在这个 <li> 中     a 是直接父元素（<li>）的第一个子元素 会被选中 lightblue -->      
        <li><a href="#">这是第3个li里面的a</a></li>     <!-- 在这个 <li> 中     a 是直接父元素（<li>）的第一个子元素 会被选中 lightblue --> 
        <li><a href="#">这是第4个li里面的a</a></li>     <!-- 在这个 <li> 中     a 是直接父元素（<li>）的第一个子元素 会被选中 lightblue --> 
        <li><a href="#">这是第5个li里面的a</a></li>    <!-- 在这个 <li> 中     a 是直接父元素（<li>）的第一个子元素 会被选中 lightblue --> 
        <li><a href="#">这是第6个li里面的a</a></li>     <!-- 在这个 <li> 中     a 是直接父元素（<li>）的第一个子元素 会被选中 lightblue --> 
        <li><a href="#">这是第7个li里面的a</a></li>     <!-- 在这个 <li> 中     a 是直接父元素（<li>）的第一个子元素 会被选中 lightblue --> 
        <li><a href="#">这是第8个li里面的a</a></li>      <!-- 在这个 <li> 中     a 是直接父元素（<li>）的第一个子元素 会被选中 lightblue --> 
    </ul>


    
</body>
</html>
03.3-选择器-结构伪类-案例-li:first-child{}

li:first-child{}

选中父元素中的第一个子元素li。

  • li 是子元素，不是父元素。
  • li必须是它父元素下的第一个子元素。
  • 如果它前面还有别的兄弟元素（不管是不是 <li>），那它就不是 :first-child。

不会被选中的情况举例（加深理解）

|------------------------------------------------------------|---------------------|-----------------------------------|
| 情况 | 是否匹配 li:first-child | 原因 |
| <div> <li>我是第一个子元素</li> </div> | ✅ 是 | li是 父元素<div> 的第一个子元素，且是 <li> |
| <div> <p>我才是第一个</p> <li>我第二个</li> </div> | ❌ 否 | 这里的li不是父元素div第一个子元素 所以不会被选中 |
| <div> <span> <li>我在 span 里</li> </span> </div> | ❌ 否 | <li> 不应该放在 <span> 里，而且不是直接子元素 |
| <ul> <li>第一项</li> <li>第二项</li> </ul> | ✅ 第一项匹配，第二项不匹配 | 只有第一个子元素li会被选择 |

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

         * {
            margin: 0;
            padding: 0;
        }

         /* 去掉列表的装饰符号 */
         ul {
            list-style: none;
        }  
 
    
       /* 选中父元素中的第一个子元素是li。
         li 是子元素，不是父元素。
         li必须是它父元素下的第一个子元素。 
        如果它前面还有别的兄弟元素（不管是不是 <li>），那它就不是 :first-child。*/
        li:first-child{
          background-color: lightblue;
       } 

   
    </style>
</head>
<body>

     <ul>
       <!--  只有第一个 <li> 是父元素 <ul> 的第一个子元素； 符合 li:first-child 的条件  会被选中为 lightblue -->
        <!-- 这个 <li> 及其内部的所有内容（包括 <a> 标签）都会显示为 浅蓝色背景。
            注意：不是 <a> 被设置了背景色，而是整个 <li> 被设置了背景色，所以 <a> 看起来也"被染蓝了"，其实是背景透上来。 -->
        <li>   
           <a href="#">这是第1个li里面的a1</a>      
            <a href="#">这是第1个li里面的a2</a>    
            <a href="#">这是第1个li里面的a4</a>
            <a href="#">这是第1个li里面的a5</a>
        </li>
        <li><a href="#">这是第2个li里面的a</a></li>    
        <li><a href="#">这是第3个li里面的a</a></li>     
        <li><a href="#">这是第4个li里面的a</a></li>     
        <li><a href="#">这是第5个li里面的a</a></li>     
        <li><a href="#">这是第6个li里面的a</a></li>      
        <li><a href="#">这是第7个li里面的a</a></li>      
        <li><a href="#">这是第8个li里面的a</a></li>      
    </ul>


    
</body>
</html>
03.4-选择器-结构伪类-案例-li:first-child a{}

li:first-child a{}

选择父元素里第一个子元素是li 且li里面的a标签

  • li:first-child：表示它是其父元素的第一个子元素，并且它是一个 <li>。
  • li:first-child a：在这个符合条件的 <li> 内部的所有 <a> 标签都会被选中。

只有第一个 <li> 是 <ul> 的第一个子元素 → 符合 li:first-child

所以只有第一个 <li> 中的 所有 <a> 标签 都会被 li:first-child a 选中 lightblue

其他 <li> 不是 <ul> 的第一个子元素 → 不符合 li:first-child，所以它们内部的 <a> 不会被选中

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

         * {
            margin: 0;
            padding: 0;
        }

         /* 去掉列表的装饰符号 */
         ul {
            list-style: none;
        }  

    /* 选择父元素里第一个子元素是li  且li里面的a标签  */
         /* 选中所有位于 li:first-child 元素内部的 <a> 元素 */
      li:first-child a{
         background-color: lightblue;
       } 


    </style>
</head>
<body>

     <ul>
       <!--  只有第一个 <li> 是 <ul> 的第一个子元素 → 符合 li:first-child
        所以只有第一个 <li> 中的 所有 <a> 标签 都会被 li:first-child a 选中 lightblue    -->
        
        <li>   
           <a href="#">这是第1个li里面的a1</a>      
            <a href="#">这是第1个li里面的a2</a>    
            <a href="#">这是第1个li里面的a4</a>
            <a href="#">这是第1个li里面的a5</a>
        </li>
        <!-- 其他 <li> 不是 <ul> 的第一个子元素 → 不符合 li:first-child，所以它们内部的 <a> 不会被选中  -->
        <li><a href="#">这是第2个li里面的a</a></li>    
        <li><a href="#">这是第3个li里面的a</a></li>     
        <li><a href="#">这是第4个li里面的a</a></li>     
        <li><a href="#">这是第5个li里面的a</a></li>     
        <li><a href="#">这是第6个li里面的a</a></li>      
        <li><a href="#">这是第7个li里面的a</a></li>      
        <li><a href="#">这是第8个li里面的a</a></li>      
    </ul>


    
</body>
</html>
03.5-选择器-结构伪类-案例-li:first-child a:first-child{}

li:first-child a:first-child {background-color: lightblue;}

++想在第一个 <li> 中选中第一个 <a>++

在整个列表中，只选中第一个 <li> 里面 第一个子元素 是 <a>标签

  • li:first-child：选中的是其父元素（通常是 <ul>）下的第一个 子元素<li>；
  • a:first-child：在这个 <li> 中，再找第一个子元素是 <a>的标签。
  • 只有第一个 <li> 中的第一个 <a> 被选中；
  • 其他所有 <a> 都不会被选中。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

         * {
            margin: 0;
            padding: 0;
        }

         /* 去掉列表的装饰符号 */
         ul {
            list-style: none;
        }  
    

/*  那如果只在第一个li中 去找第一个元素a 这个是什么公式呢? */
 /* 方法一: */
li:first-child a:first-child {
    background-color: lightblue;
}  

/* 方法二: */
/*  li:nth-child(1) a:nth-child(1) {
    background-color: lightblue;
} */

    </style>
</head>
<body>

     <ul>
       <!--  在整个列表中，只选中第一个 <li> 里面 第一个子元素 是 <a>标签  -->
        
        <li>   
           <a href="#">这是第1个li里面的a1</a>      
            <a href="#">这是第1个li里面的a2</a>    
            <a href="#">这是第1个li里面的a4</a>
            <a href="#">这是第1个li里面的a5</a>
        </li>
        <!-- 其他 <li> 不是 <ul> 的第一个子元素 → 不符合 li:first-child，所以它们内部的 <a> 不会被选中  -->
        <li><a href="#">这是第2个li里面的a</a></li>    
        <li><a href="#">这是第3个li里面的a</a></li>     
        <li><a href="#">这是第4个li里面的a</a></li>     
        <li><a href="#">这是第5个li里面的a</a></li>     
        <li><a href="#">这是第6个li里面的a</a></li>      
        <li><a href="#">这是第7个li里面的a</a></li>      
        <li><a href="#">这是第8个li里面的a</a></li>      
    </ul>


    
</body>
</html>
03.6-选择器-结构伪类-案例-li:nth-child(1) a:nth-child(1){}

li:nth-child(1) a:nth-child(1){}

++想在第一个 <li> 中选中第一个 <a>++

在整个列表中，首先找到父元素（<ul>）下的第一个子元素 <li>，然后在这个 <li> 内部查找第一个子元素且该子元素必须是 <a> 标签。

li:nth-child(1)

  • 选择父元素（如 <ul>）下的第一个 <li> 元素。

a:nth-child(1)

  • 选择某个父元素（在这里是 <li>）下的第一个子元素，且这个子元素必须是 <a> 标签。

(换句话说，它会选择每个 <li> 中的第一个子元素a)

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

         * {
            margin: 0;
            padding: 0;
        }

         /* 去掉列表的装饰符号 */
         ul {
            list-style: none;
        }  
    

/*  那如果只在第一个li中 去找第一个元素a 这个是什么公式呢? */
 /* 方法一: */
/* li:first-child a:first-child {
    background-color: lightblue;
}  */

/* 方法二: */
li:nth-child(1) a:nth-child(1) {
    background-color: lightblue;
} 

    </style>
</head>
<body>

     <ul>
       <!--  在整个列表中，只选中第一个 <li> 里面 第一个子元素 是 <a>标签  -->
        
        <li>   
           <a href="#">这是第1个li里面的a1</a>      
            <a href="#">这是第1个li里面的a2</a>    
            <a href="#">这是第1个li里面的a4</a>
            <a href="#">这是第1个li里面的a5</a>
        </li>
        <!-- 其他 <li> 不是 <ul> 的第一个子元素 → 不符合 li:first-child，所以它们内部的 <a> 不会被选中  -->
        <li><a href="#">这是第2个li里面的a</a></li>    
        <li><a href="#">这是第3个li里面的a</a></li>     
        <li><a href="#">这是第4个li里面的a</a></li>     
        <li><a href="#">这是第5个li里面的a</a></li>     
        <li><a href="#">这是第6个li里面的a</a></li>      
        <li><a href="#">这是第7个li里面的a</a></li>      
        <li><a href="#">这是第8个li里面的a</a></li>      
    </ul>


    
</body>
</html>

03.8-选择器-结构伪类-案例-li:first-child a:nth-child(3){}

li:first-child a:nth-child(3) { }

选择器只会选中第一个 <li> 中的第三个 <a> 标签，并对其应用样式。

  • li:first-child ：选择父元素（在这里是 <ul>）下的第一个 <li> 元素。
  • a:nth-child(3) ：在选定的第一个 <li> 内部，选择第三个子元素且该子元素必须是 <a> 标签。

注意事项

  • 如果第一个 <li> 中没有至少三个 <a> 标签，则没有任何元素会被选中并应用样式。
  • nth-child(n) 选择器是从 1 开始计数的，所以第三个子元素用 3 表示。如果你需要选择第四个子元素，则应使用 4，以此类推。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

         * {
            margin: 0;
            padding: 0;
        }

         /* 去掉列表的装饰符号 */
         ul {
            list-style: none;
        }  


  /* 找到第一个li 里面的  第三个a  设置文字颜色是红色 */
    /* 方法一: */     
  
   li:first-child a:nth-child(3) {
            background-color: lightblue;
        } 

/* 方法二: */
/* li:nth-child(1) a:nth-child(3) {
    background-color: lightblue;
} */




    </style>
</head>
<body>

     <ul>
       <!--  在整个列表中，只选中第一个 <li> 里面 第一个子元素 是 <a>标签  -->
        
        <li>   
           <a href="#">这是第1个li里面的a1</a>      
            <a href="#">这是第1个li里面的a2</a>    
            <a href="#">这是第1个li里面的a4</a>
            <a href="#">这是第1个li里面的a5</a>
        </li>
        <!-- 其他 <li> 不是 <ul> 的第一个子元素 → 不符合 li:first-child，所以它们内部的 <a> 不会被选中  -->
        <li><a href="#">这是第2个li里面的a</a></li>    
        <li><a href="#">这是第3个li里面的a</a></li>     
        <li><a href="#">这是第4个li里面的a</a></li>     
        <li><a href="#">这是第5个li里面的a</a></li>     
        <li><a href="#">这是第6个li里面的a</a></li>      
        <li><a href="#">这是第7个li里面的a</a></li>      
        <li><a href="#">这是第8个li里面的a</a></li>      
    </ul>


    
</body>
</html>

03.9-选择器-结构伪类-案例-li:nth-child(1) a:nth-child(3){}

li:nth-child(1) a:nth-child(3){}

选择器只会选中第一个 <li> 中的第三个 <a> 标签，并对其应用样式。

  • li:nth-child(1) ：选择父元素（在这里是 <ul>）下的第一个 <li> 元素。
  • a:nth-child(3) ：在选定的第一个 <li> 内部，选择第三个子元素且该子元素必须是 <a> 标签。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

         * {
            margin: 0;
            padding: 0;
        }

         /* 去掉列表的装饰符号 */
         ul {
            list-style: none;
        }  




  /* 找到第一个li 里面的  第三个a  设置文字颜色是红色 */
    /* 方法一: */     
  
   /* li:first-child a:nth-child(3) {
            background-color: lightblue;
        }  */

/* 方法二: */
 li:nth-child(1) a:nth-child(3) {
    background-color: lightblue;
} 

</style>
</head>
<body>

     <ul>
       <!--  在整个列表中，只选中第一个 <li> 里面 第一个子元素 是 <a>标签  -->
        
        <li>   
           <a href="#">这是第1个li里面的a1</a>      
            <a href="#">这是第1个li里面的a2</a>    
            <a href="#">这是第1个li里面的a4</a>
            <a href="#">这是第1个li里面的a5</a>
        </li>
        <!-- 其他 <li> 不是 <ul> 的第一个子元素 → 不符合 li:first-child，所以它们内部的 <a> 不会被选中  -->
        <li><a href="#">这是第2个li里面的a</a></li>    
        <li><a href="#">这是第3个li里面的a</a></li>     
        <li><a href="#">这是第4个li里面的a</a></li>     
        <li><a href="#">这是第5个li里面的a</a></li>     
        <li><a href="#">这是第6个li里面的a</a></li>      
        <li><a href="#">这是第7个li里面的a</a></li>      
        <li><a href="#">这是第8个li里面的a</a></li>      
    </ul>


    
</body>
</html>

6链接伪类选择器

常用于选中超链接的不同状态

选中超链接的不同状态，常用哪些链接伪类选择器？

|-------------------|----------------|
| 链接伪类选择器语法 | 功能 |
| a:link { } | 选中a链接 未访问过 的状态 |
| a:visited { } | 选中a链接 访问之后 的状态 |
| a:hover{ } | 选中 鼠标悬停 的状态 |
| a:active { } | 选中 鼠标按下 的状态 |

注意点：

  • 如果需要同时实现以上四种伪类状态效果，需要按照LVHA顺序书写

(记忆口诀：男盆友送了你一个LV 包包，你开心的HA哈笑)

  • 其中:hover伪类选择器使用更为频繁，常用于选择各类元素的悬停状态

7. 焦点伪类选择器

用于选中元素获取焦点时状态，常用于表单控件

选中表单控件获取焦点的状态，可以使用什么焦点伪类选择器？

html 复制代码 
input:focus {
background-color:skyblue;
}

效果：

表单控件获取焦点时默认会显示外部轮廓线

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 获得焦点的状态 */
        /* 获得焦点: 把光标点到input里面; 失去焦点: 把光标从input里面拿出来 */
        input:focus {
            background-color: pink;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
    <input type="button">
</body>
</html>

8.属性选择器

通过元素上的HTML属性来选择元素，常用于选择input 标签

选择器语法：

|------------------|--------------------------------|
| 选择器 | 功能 |
| E[attr] | 选择具有 attr 属性 的 E 元素 |
| E[attr="'val"] | 选择具有 attr 属性并且属性值等于 va1 的 E 元素 |

选中页面中所有的文本框，使用属性选择器如何实现呢？

input[type="text"] { }

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* text:背景色是粉色; password背景色是skyblue */
        input[type='text']  {
            background-color: pink;
        }

        input[type="password"] {
            background-color: skyblue;
        }

        /* input:nth-child(1) {} */
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
</body>
</html>
相关推荐
gyeolhada8 小时前
Web: 基础知识、HTML、CSS、JavaScript（英文版--知识点学习/复习）
前端·javascript·css3·html5·web
Deng94520131414 小时前
快捷订餐系统
前端·css·css3
慧一居士2 天前
CSS和CSS3区别对比
前端·css3
凌辰揽月3 天前
7月10号总结 (1)
前端·css·css3
Eighteen Z3 天前
CSS揭秘：10.平行四边形
前端·css·css3
Liudef064 天前
儿童趣味记忆配对游戏
css·游戏·css3
吉吉安4 天前
两张图片对比clip功能
javascript·css·css3
知识分享小能手5 天前
Bootstrap 5学习教程，从入门到精通，Bootstrap 5 表单验证语法知识点及案例代码（34）
前端·javascript·学习·typescript·bootstrap·html·css3
码哥DFS6 天前
Flex布局原理
前端·css·css3
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02KGG转MP3工具|非KGM文件|解密音频03Coze扣子平台完整体验和实践（附国内和国际版对比）04身弱武修法：玄之又玄，奇妙之门05集群聊天服务器---MySQL数据库的建立06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07使用Ruby接入实时行情API教程08【无标题】09DeepSeek各版本说明与优缺点分析10浅谈几种js设计模式