四-选择器的进阶+背景属性（这章更是重中之重）-CSDN博客

本文链接：https://blog.csdn.net/2302_81736540/article/details/148318444

四-选择器的进阶+背景属性（这章更是重中之重）

博主今天发雷力，居然做到日更俩篇，我的爷爷我的奶我的老舅小棉袄，这么努力，不活了吗dbz。呜呜呜，被自己感动到了。

在这里插入图片描述

一、复合选择器

用于更精准地选择 HTML 元素，结合多种选择器规则。

后代选择器

符号：空格（如 div p）。
语法：选择器1（空格）选择器2 { css }
作用：选中父元素的所有后代元素（儿子、孙子等）。
案例：div p { color: red; } 会选中 div 内部所有层级的 p 标签。

 
<!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>
        /* 找到div的儿子p设置文字颜色是红色 */
        /* 父选择器   后代选择器 {} */
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 后代: 儿子, 孙子, 重孙子..... -->
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
</body>
</html>

子代选择器

符号：>（如 div > p）。
语法：:选择器1 > 选择器2 { css }
作用：仅选中父元素的直接子元素（注意了这里仅限儿子，这是个易错点）。
案例：div > a { color: red; } 只选中 div 直接子级的 a 标签。

 
<!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>
        /* 空格隔开的是后代, 儿子,孙子,重孙子 */
        /* div a {
            color: red;
        } */
 
        /* 只想选中儿子a */
        /* div的儿子a文字颜色是红色 */
        div>a {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>
</html>

并集选择器

符号：,（如 p, div, span）。
语法：选择器1 ，选择器2 { css }
作用：同时选中多个选择器对应的元素，设置相同样式。
案例：p, div { font-size: 16px; } 统一 p 和 div 的字体大小。

 
<!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>
        /* p div span h1 文字颜色是红色 */
        /* 选择器1, 选择器2 {} */
        p, 
        div, 
        span, 
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
 
    <h2>h2</h2>
</body>
</html>

交集选择器

符号：无间隔（如 p.box）。
语法：选择器1. 选择器2 { css }
作用：选中同时满足多个条件的元素（如既是 p 标签又有 box 类）。
案例：p.box { color: red; } 仅选中类名为 box 的 p 标签。

 
<!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>
        /* p {
            color: red;
        } */
 
        /* .box {
            color: red;
        } */
 
        /* 必须是p标签,而且添加了box类 */
        /* p.box {
            color: red;
        } */
    </style>
</head>
<body>
    <!-- 找到第一个p,带box类的, 设置文字颜色是红色 -->
    <p class="box box1" id="dilireba">这是p标签:box</p>
    <p class="box">这是p标签:box</p>
    <p>pppppp</p>
    <div class="box">这是div标签:box</div>
</body>
</html>

伪类选择器（hover）（这个是博主学到现在觉得最有意思的）

符号：:hover（如 a:hover）。
语法：选择器:hover { css }
作用：选中鼠标悬停时的元素状态。
案例：a:hover { color: red; } 鼠标悬停时超链接变红。

 
<!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>
        /* 悬停的时候文字颜色是红色 */
        a:hover {
            color: red;
            background-color: green;
        }
 
        /* 用户鼠标悬停到div的时候, 文字是绿色 */
        div:hover {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">这是超链接</a>
    <!-- 任何标签都可以添加伪类, 任何一个标签都可以鼠标悬停 -->
    <div>div</div>
</body>
</html>

二、背景相关属性

用于设置元素的背景样式，包括颜色、图片、平铺等。

背景颜色（background-color）
- 取值：关键字（如 pink）、十六进制（如 #ccc）、RGB/RGBA（如 rgba(0,0,0,0.5)）。
- 默认值：透明（transparent）。
背景图片（background-image）
- 语法：background-image: url('图片路径');。
- 注意：图片默认平铺，需配合 background-repeat 使用；图片不会撑开盒子，需手动设置盒子宽高。
背景平铺（background-repeat）
- 取值：
  - repeat（默认，双向平铺）；
  - no-repeat（不平铺）；
  - repeat-x（水平平铺）；
  - repeat-y（垂直平铺）。
背景位置（background-position）
- 取值：
  - 方位词（如 center center、right bottom）；
  - 坐标值（如 50px 100px，水平 / 垂直距离）。
- 混合使用：如 background-position: right 20px bottom;。
背景连写（background）
- 语法：background: color image repeat position;（顺序可调整，可省略部分属性）。
- 案例：background: pink url(img.jpg) no-repeat center;。

三、元素显示模式

决定元素在页面中的布局方式，分为三类：

块级元素
- 特点：
  - 独占一行，宽度默认父元素 100%；
  - 可设置宽高；
  - 代表标签：div、p、h1-h6、ul 等。
行内元素
- 特点：
  - 一行可显示多个，宽度由内容决定；
  - 不可设置宽高；
  - 代表标签：a、span、em 等。
行内块元素
- 特点：
  - 一行可显示多个，可设置宽高；
  - 代表标签：img、input、button 等。
显示模式转换（display属性）

(！！！重点，页面导航或者其他排版会使用到)
- 块级：display: block;（如将 span 转为块级）。
- 行内块：display: inline-block;（如让 div 一行显示）。
- 行内：display: inline;（如将 div 转为行内）。

四、CSS 特性（理解）

继承性
- 定义：子元素默认继承父元素的部分样式（主要是文字相关属性）。
- 可继承属性：color、font-*、text-*、line-height 等。
- 注意：浏览器默认样式可能覆盖继承的样式（如 a 标签的颜色需手动设置）。
层叠性
- 定义：当多个样式作用于同一元素时，相同属性冲突时后写的样式生效，不同属性叠加生效。
- 案例：div { color: red; } div { color: green; } 最终颜色为绿色。

五、综合案例（博主依旧拿来主义）

普通导航栏

实现：使用行内块元素（a 标签转 inline-block），设置宽高、背景色、鼠标悬停效果。
效果：

核心代码：

 
<!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>
        /* a 显示模式是行内, 加宽高默认不生效, 转显示模式: 行内块 */
        a {
            text-decoration: none;
            width: 100px;
            height: 50px;
            background-color: red;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
 
        a:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- a*5 -->
    <!-- 选多行加内容删除 alt + shift + 鼠标左键单击 -->
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

五彩导航栏

实现：为不同 a 标签添加类名，设置不同背景图片，悬停时切换图片。
效果：

核心代码：

 
<!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>
        a {
            text-decoration: none;
            width: 120px;
            height: 58px;
            background-color: pink;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            color: #fff;
        }
        /* 每个a的背景图不同, 单独找到每个a, 设置不同的背景图片 */
        .one {
            background-image: url(./images/bg1.png);
        }
 
        .two {
            background-image: url(./images/bg2.png);
        }
 
        .three {
            background-image: url(./images/bg3.png);
        }
 
        .four {
            background-image: url(./images/bg4.png);
        }
 
        .one:hover {
            background-image: url(./images/bg5.png);
        }
 
        .two:hover {
            background-image: url(./images/bg6.png);
        }
 
        .three:hover {
            background-image: url(./images/bg7.png);
        }
 
        .four:hover {
            background-image: url(./images/bg8.png);
        }
    </style>
</head>
<body>
    <a href="#" class="one">五彩</a>
    <a href="#" class="two">五彩</a>
    <a href="#" class="three">五彩</a>
    <a href="#" class="four">五彩</a>
</body>
</html>