【CSS基础】选择器进阶+背景属性+元素显示模式+三大特性

已于 2022-11-11 09:43:12 修改
阅读量408 收藏 3
点赞数 3
分类专栏： CSS+HTML+JavaScript 文章标签： css 前端 css3
于 2022-09-15 17:06:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59084325/article/details/126875282
版权

目录

1.CSS的复合选择器

1.1 后代选择器

作用：

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

选择器语法：

元素1 元素2 { 样式声明 }

结果：

  • 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

注意点：

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

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

例如：

ul li { 样式声明 } 		/* 选择 ul 里面所有的 li 标签元素 */
  • 元素1 和 元素2 中间用 空格 隔开
  • 元素1 是父级，元素2 是子级，最终选择的是 元素2，即：元素1 是不会生效样式的
  • 元素2 可以是儿子，也可以是孙子等，只要是 元素1 的后代即可
  • 元素1 和 元素2 可以是任意基础选择器

小案例:

<!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>

在这里插入图片描述

1.2 子代选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。

注意：是最近一级而并非最近一个！

语法：

元素1>元素2 { 样式声明 }

上述语法表示选择元素1 里面的所有直接后代（子元素）元素2。

例如：

div>p { 样式声明 } 	/* 选择 div 里面所有最近一级 p 标签元素 */
  • 元素1 和 元素2 中间用 大于号 隔开
  • 元素1 是父级，元素2 是子级，最终选择的是元素2，即元素1 是不会生效样式的
  • 元素2 必须是亲儿子，其孙子、重孙之类都不归他管，你也可以叫：亲儿子选择器
<!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>

在这里插入图片描述

1.3 并集选择器

作用：

  • 同时选择多组标签，设置相同的样式，通常用于集体声明

选择器语法：

元素1, 元素2, 元素3 { 样式声明 }

元素1,
元素2,
元素3 {
    样式声明
}
/* 推荐写法，编码风格 */

上述语法表示选择元素1、元素2 和 元素3。

注意点：

  1. 并集选择器中的每组选择器之间通过 , 分隔

  2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器

  3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

例如：

ul, div { 样式声明 }		 /* 选择 ul 和 div标签元素 */
  • 元素1 和 元素2 中间用逗号隔开（最后一个不加逗号）
  • 逗号可以理解为和的意思
  • 并集选择器通常用于集体声明
<!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>

在这里插入图片描述

1.4 交集选择器

作用： 选中页面中同时满足多个选择器的标签

选择器语法：

选择器1选择器2 { css }

结果：

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

注意点：

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

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

<!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;
        }
        /* #dilireba {
            color: red;
        } */

        /* .box1 {
            color: green;
        } */
    </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>

在这里插入图片描述

1.5 hover伪类选择器

作用： 选中鼠标悬停在元素上的状态，设置样式

选择器语法：

选择器:hover { css } 

<!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>

在这里插入图片描述

1.6 复合选择器总结

选择器作用特征使用情况隔开符号及用法
后代选择器用来选择后代元素可以是子孙后代较多符号是空格 .nav a
子代选择器选择最近一级元素只选亲儿子较少符号是大于 .nav>p
并集选择器选择某些相同样式的元素可以用于集体声明较多符号是逗号 .nav, .header
交集选择器可以确定满足条件的标签可以确定满足条件的标签较多标签连着写
链接伪类选择器选择不同状态的链接跟链接相关较多重点记住 a{} 和 a:hover 实际开发的写法

强调：复合选择器的层级写得越细越好（可读性，可维护性，安全性），同时将复合选择器的层级写得越细，可以提前避免大部分的选择器优先级混乱！

2.背景相关属性

2.1 背景颜色

background-color 属性定义了元素的背景颜色。

background-color: 颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

background-color: transparent;

目前 CSS 还支持丰富的渐变色，但是某些浏览器不支持，这里了解即可，具体内容请查阅资料。

注意点:

  • 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
  • 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
<!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 {
            width: 400px;
            height: 400px;
            /* background-color: pink; */
            /* background-color: #ccc; */
            /* 红绿蓝三原色, a是透明度0-1 */
            /* background-color: rgba(0, 0, 0, 0.5); */
            background-color: rgba(0, 0, 0, .5);
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

在这里插入图片描述

2.2 背景图片

background-image 属性描述了元素的背景图像，实际开发常用于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置（精灵图也是一种运用场景）。

background-image : none | url(url)
参数值作用
none无背景图（默认的）
url使用绝对或相对地址指定背景图像

注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。

<!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 {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/1.jpg);
            /* 1、背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2、默认情况下，背景图片是平铺的 */
            /* background-repeat: repeat; */ /* 页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片区域会覆						盖背景颜色 */
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

在这里插入图片描述

2.3 背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

注：平铺可以简单的理解为“重复”。

background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数值作用
repeat背景图像在纵向和横向上平铺（默认的）
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向上平铺
<!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 {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/1.jpg);
            /* background-repeat: repeat; */
            /* 不平铺: 图片只显示一个 */
            background-repeat: no-repeat;
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

在这里插入图片描述

2.4 背景位置

利用 background-position 属性可以改变图片在背景中的位置。

background-position: xm y;

参数代表的意思是：x 坐标 和 y 坐标，可以使用 方位名词 或者 精确单位。

参数值说明
length百分数 | 由浮点数字和单位标识符组成的长度值
positiontop | center | bottom | left | rigth 方位名词

  • 参数是方位名词

    • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
    • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

  • 参数是精确单位

    • 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
    • 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

  • 参数是混合单位

    • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
<!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 {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            /* background-position: right 0; */
            /* background-position: right bottom; */
            /* background-position: center center; */
            /* background-position: center; */
            /* background-position: 50px 0; */
            /* background-position: 50px 100px; */
            background-position: -50px -100px;

            /* 正数: 向右向下移动; 负数:向左向上移动 */
            /* 注意: 背景色和背景图只显示在盒子里面 */
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

在这里插入图片描述

2.5 背景相关属性的连写形式

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中，从而节约代码量。
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background: transparent url(image.jpg) no-repeat fixed top;

这是实际开发中，我们更提倡的写法。

<!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 {
            width: 400px;
            height: 400px;
            /* 不分先后顺序 背景色  背景图  背景图平铺  背景图位置 */
            /* background: pink url(./images/1.jpg) no-repeat center bottom; */
            /* 背景图位置如果是英文单词可以颠倒顺序 */
            background: pink url(./images/1.jpg) no-repeat bottom center ;

            /* 测试背景图位置如果是数值 不要颠倒顺序 */
            /* 水平50px, 垂直100px */
            /* background: pink url(./images/1.jpg) no-repeat 50px 100px; */
            background: pink url(./images/1.jpg) no-repeat 100px 50px;

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.CSS 的元素显示模式

3.1 块级元素

显示特点：

  1. 独占一行（一行只能显示一个）
  2. 宽度默认是父元素的宽度，高度默认由内容撑开
  3. 可以设置宽高

代表标签：

  • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

注意：

  • 文字类的块级元素内不能放置块级元素，会发生语法错误
  • <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放 <div>
  • 同理， <h1> ~ <h6> 等都是文字类块级标签，里面也不能放其他块级元素
<!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>
        /* 块: 独占一行; 宽度默认是父级100%; 添加宽度都生效 */
        div {
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 行内块 */
            /* display: inline-block; */

            /* 行内 */
            display: inline;
        }
    </style>
</head>
<body>
    <div>11111</div>
    <div>22222</div>
</body>
</html>

在这里插入图片描述

3.2 行内元素

显示特点：

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高

代表标签：

  • a、span 、b、u、i、s、strong、ins、em、del……
<!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>
        /* 行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同 */
        span {
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 行内块 */
            /* display: inline-block; */

            /* 块 */
            display: block;
        }
    </style>
</head>
<body>
    <span>span</span>
    <span>span</span>
</body>
</html>

在这里插入图片描述

3.3 行内块元素

显示特点：

  1. 一行可以显示多个
  2. 可以设置宽高

代表标签：

  • input、textarea、button、select……
  • 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
<!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>
        /* 行内块: 一行显示多个; 加宽高生效 */
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <img src="./images/1.jpg" alt="">
    <img src="./images/1.jpg" alt="">
</body>
</html>

在这里插入图片描述

3.4 元素显示模式总结

元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可以设置宽度和高度容器的 100%容量级可以包含任何标签
行内元素一行可以放多个行内元素不可以直接设置宽度和高度它本身内容的宽度容纳文本或其他行内元素
行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度

学习元素显示模式的主要目的是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。

3.5 元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性
比如：想要增加链接 <a> 的触发范围。

  • 转换为块元素：display: block;（由于经常需要设置宽高，所以通常会将行内元素转换为块元素）
  • 转换为行内元素：display: inline;
  • 转换为行内块：display: inline-block;（常用）

3.6 HTML嵌套规范注意点

  1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……

    • 但是：p标签中不要嵌套div、p、h等块级元素

  2. a标签内部可以嵌套任意元素

    • 但是：a标签不能嵌套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>
</head>
<body>
    <!-- p 和 h标题不能相互嵌套 -->
    <!-- <p>
        <h1>一级标题</h1>
    </p> -->
    <!-- p里面不能包含div -->
    <p>
        <div>divdiv</div>
    </p>
</body>
</html>

3.7 居中方法总结

在这里插入图片描述

4.CSS三大特性

4.1 继承性

现实中的继承：我们继承了父亲的姓。

CSS 中的继承：子标签会继承父标签的某些样式，如：文本颜色和字号，简单的理解就是：子承父业。

  • 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
  • 子元素可以继承父元素的样式（ text-、font-、line-、color ） 文本、字体、段落、颜色
<!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 {
            color: red;
            font-size: 30px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>
</body>
</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>
        div {
            color: red;
            font-size: 12px;
        }

        a {
            color: pink;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">超链接</a>
        <h1>一级标题</h1>
    </div>
</body>
</html>

在这里插入图片描述

4.2 层叠性

给同一个选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。

层叠性原则：

  • 样式冲突，遵循的原则是 就近原则，哪个样式距离结构近，就执行哪个样式
  • 样式不冲突，不会层叠

注：就近的标准是：后 > 前

<!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 {
            color: red;
            color: green;
        }

        .box {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box">文字</div>
</body>
</html>

在这里插入图片描述

4.3 优先级

优先级的介绍

  • 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
  • 优先级公式：
    继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
  • 注意点：
  1. !important写在属性值的后面，分号的前面！
  2. !important不能提升继承的优先级，只要是继承优先级最低！
  3. 实际开发中不建议使用 !important 。
<!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>
        #box {
            color: orange;
        }

        .box {
            color: blue;
        }

        div {
            color: green !important;
        }

        body {
            color: red;
        }

        /* !important不要给继承的添加, 自己有样式无法继承父级样式 */
    </style>
</head>
<body>
    <!-- 意义: 当一个标签使用了多个选择器, 样式冲突的时候, 到底谁生效 -->
    <div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
</html>

在这里插入图片描述

权重叠加计算

  • 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

  • 权重叠加计算公式：（每一级之间不存在进位）

在这里插入图片描述

  • 比较规则：
  1. 先比较第一级数字，如果比较出来了，之后的统统不看
  2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
  3. ……
  4. 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
  • 注意点：!important如果不是继承，则权重最高，天下第一！
<!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>
    /* #one {
      color: red;
    }

    .son {
      color: blue;
    }

    p {
      color: green;
    } */

    /* (行内, id, 类, 标签) */

    /* (0, 1, 0, 1) */
     div #one {
      color: orange;
    }

    /* (0, 0, 2, 0) */
    .father .son {
      color: skyblue;
    }

    /* 0, 0, 1, 1 */
    .father p {
      color: purple;
    }
    
    /* 0, 0, 0, 2 */
    div p {
      color: pink;
    } 
    
  </style>
</head>
<body>
  <div class="father">
    <p class="son" id="one">我是一个标签</p>
  </div>
</body>
</html>

在这里插入图片描述

5.综合案例

<!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>

在这里插入图片描述

<!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>

在这里插入图片描述

BillySturate
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS学习笔记02——选择器进阶+背景属性+元素显示模式+三大特性
visionchyw的博客
05-26 102
选择器进阶 复合选择器 后代选择器：空格 作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素 选择器语法：选择器1 选择器2 { css } 结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式 注意点： •后代包括：儿子、孙子、重孙子…… •后代选择器中，选择器与选择器之前通过 空格 隔开 <html lang="en"><head> <meta charset="UTF-8"> <me
CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性
12-05
CSS基础-选择器进阶+背景属性+元素显示模式+三大特性 CSS基础选择器进阶： 在CSS中，选择器是用于选择HTML元素并应用样式的核心机制。选择器进阶是指在基础选择器的基础上，进一步学习和应用选择器的高级规则和...
CSS选择器详解及部分元素属性
小小码农
03-12 2400
CSS选择器详解及部分元素属性
CSS基础 选择器进阶+背景属性+元素显示模式+三大特性
qq_51946936的博客
09-27 106
选择器进阶+背景属性+元素显示模式+三大特性 <style> .father p { color: red; } </style> </head> <body> <div class="father"> <p>小姐姐</p> <div> <p>
CSS基础知识---选择器进阶+背景属性+元素显示模式+三大特性
weixin_71171795的博客
11-17 245
CSS样式必备基础知识 老手的查漏补缺 欢迎大佬指正补充
CSS选择器进阶+背景属性+元素显示模式+三大特性
GTC的博客
02-21 281
CSS选择器进阶+背景属性+元素显示模式+三大特性1、选择器进阶1.1、复合选择器1.1.1、后代选择器：空格1.1.2、子代选择器： >1.2、并集选择器1.3、交集选择器1.4、hover伪类选择器1.5、Emmet语法1.6、总结2、背景相关属性2.1、背景颜色2.2、背景图片2.3、背景平铺2.4、背景位置2.5、背景相关属性连写3、元素显示模式3.1、块级元素3.2、行内元素3.3、行内块元素3.4、元素显示模式转换4、CSS 特性4.1、继承性4.1.1、继承的应用4.1.2继承失效的特殊
CSS二、选择器进阶+背景属性+元素显示模式+三大特性
zwj_zny的博客
03-14 135
选择器作用格式示例后代选择器找后代选择器之间通过空格分隔子代选择器找儿子选择器之间通过分隔并集选择器找到多类元素选择器之间通过分隔交集选择器找到同时满足多个选择器的元素选择器之间紧挨着hover伪类选择器选中鼠标悬停在元素上的状态:hover特性：子元素有默认继承父元素样式的特点（子承父业）可以继承的常见属性(文字控制属性都可以继承)color……可以通过调试工具判断样式是否可以继承好处：可以在一定程度上减少代码。
CSS02-基础选择器进阶+背景属性+元素显示模式+三大特性
能看懂的，才是一类人.
11-12 113
一、CSS基础选择器进阶+背景属性+元素显示模式+三大特性 1.标题选择器进阶 复合选择器 1.1 后代选择器：空格 作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素 ➢ 选择器语法：选择器1 选择器2 { css } ➢ 结果： • 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式 ➢ 注意点： 后代包括：儿子、孙子、重孙子…… 后代选择器中，选择器与选择器之前通过 空格 隔开 1.2 子代选择器：> 作用：根据 HTML 标签的
20220501CSS学习笔记------选择器进阶+背景相关属性+元素显示模式+三大特性
qq_42847719的博客
05-01 155
优先级: 指CSS中的选择器具有优先级, 作用范围越小优先级越高, !important>id>class>标签名>继承(属于间接选中)
Day04-CSS基础（选择器进阶+背景属性+元素显示模式+三大特性）
weixin_45831040的博客
06-30 218
作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素选择器语法：选择器1 选择器2 { css }结果：在选择器1所找到标签的后代（儿子、孙子、重孙子）中，找到满足选择器2的标签，设置样式注意点： 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素选择器语法：选择器1 > 选择器2 { css }结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式注意点： 作用：同时选择多组标签，设置相同的样式选择器语法：选择器1 ， 选择器2 { css
day04（CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性）.rar
12-01
day04（CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性）.rar
CSS第02天（选择器进阶+背景相关属性+元素显示模式+三大特性）总结.xmind
07-04
CSS第02天（选择器进阶+背景相关属性+元素显示模式+三大特性）总结针对css初学者的提升思维导图学习路线
CSS第02天（选择器进阶背景相关属性元素显示模式三大.emmx
08-22
CSS第02天（选择器进阶背景相关属性元素显示模式三大.emmx
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
2.css的元素显示模式 html元素一般分为块元素和行内元素 （1）块级元素 div p h1-h6 ul ol li ①独占一行 ②宽度 高度 外边距 内边距都可控制 ③宽度默认是容器（父级元素）100%的宽度 ④是一个容器及盒子 里面...
CSS 实现电影信息卡片
最新发布
qq_33003143的博客
06-16 695
综合运用CSS知识实现电影信息卡片
px转rem插件postcss-plugin-px2rem使用方法（浏览器缩放页面自适应）
x_XDGS的博客
06-13 680
浏览器缩放自适应，px转rem，postcss-plugin-px2rem插件
css系列：音频播放效果-波纹律动
zkx529的博客
06-12 531
音频律动效果，实现了语音播放时的带有动画的特殊样式的进度条
vue在hash路由模式下实现点击定位滑动
IT_moshang的博客
06-12 371
hash路由模式下实现点击滑动
html + css 实现元素隐藏 鼠标悬浮显示
05-24
可以使用 CSS 的 `display` 属性和 `:hover` 伪类来实现元素隐藏和鼠标悬浮显示的效果。 首先，将需要隐藏的元素的 `display` 属性设置为 `none`，这样该元素就会被隐藏起来。例如： ```css .hide { display: none; } ``` 接着，在需要触发显示的元素上使用 `:hover` 伪类，将需要显示的元素的 `display` 属性设置为 `block` 或其他适合的属性值。例如： ```css .show:hover + .hide { display: block; } ``` 这里使用了相邻兄弟选择器 `+`，表示当鼠标悬浮在 `.show` 元素上时，下一个兄弟元素（即 `.hide` 元素）会被显示出来。 完整的代码示例： ```html <div class="container"> <div class="show">鼠标悬浮显示</div> <div class="hide">隐藏元素</div> </div> <style> .hide { display: none; } .show:hover + .hide { display: block; } </style> ``` 这样，当鼠标悬浮在 `.show` 元素上时，`.hide` 元素就会被显示出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BillySturate

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值