目录
1、后代选择器
2、子代选择器
3、并集选择器
4、交集选择器
5、伪类选择器
6、超链接伪类
7、CSS特性-继承性
8、CSS特性-层叠性
9、CSS特性-优先级
10、优先级-叠加计算
11、Emmet写法
12、背景图
13、背景图平铺方式
14、背景图位置
15、背景图缩放
16、背景图固定
17、背景图复合属性
18、显示模式
19、显示模式转换
20、综合案例1-热词
1、后代选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>/* div里面的span文字颜色是红色 *//* 后代选择器，选中所有后代，包含儿子，孙子，重孙子... */div span {color: red;}</style>
</head>
<body><span>span 标签</span><div><span>这是div的儿子span</span><p><span>这是div的孙子span</span></p></div>
</body>
</html>2、子代选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子代选择器</title><style>/* div的儿子span文字颜色是红色 */div > span {color: red;}</style>
</head>
<body><div><span>儿子 span</span><p><span>孙子 span</span></p></div>
</body>
</html>3、并集选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>并集选择器</title><style>/* div、p、span 文字颜色是红色 */div,p,span {color: red;}</style>
</head>
<body><div>div 标签</div><p>p 标签</p><span>span 标签</span>
</body>
</html>4、交集选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>交集选择器</title><style>/* 第一个 p 标签文字颜色是红色 *//* 既有的关系：既是 p 标签，又有 box 类 */p.box {color: red;}</style>
</head>
<body><p class="box">p 标签，使用了类选择器 box</p><p>p 标签</p><div class="box">div 标签，使用了类选择器</div>
</body>
</html>5、伪类选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器</title><style>/* 任何标签都可以设置鼠标悬停的状态 */a:hover {color: red;}/* div:hover */.box:hover {color: green;}</style>
</head>
<body><a href="#">a 标签，超链接</a><div class="box">div 标签</div>
</body>
</html>6、超链接伪类
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接伪类</title><style>/*a:link {color: red;}a:visited {color: green;}a:hover {color: blue;}a:active {color: orange;}*//* 工作中，一个 a 标签选择器设置超链接的样式，hover状态特殊设置 */a {color: red;}a:hover {color: green;}</style>
</head>
<body><a href="#">a 标签，测试伪类</a>
</body>
</html>7、CSS特性-继承性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-继承性</title><style>body {font-size: 30px;color: red;font-weight: 700;}</style>
</head>
<body><div>div 标签</div><p>p 标签</p><span>span 标签</span><!-- 如果标签自己有样式则生效自己的样式，不继承 --><a href="#">a 标签</a><h1>h1 标签</h1>
</body>
</html>8、CSS特性-层叠性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-层叠性</title><style>/* 覆盖、叠加 */div {color: green;font-size: 30px;}div {color: red;font-weight: 700;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>9、CSS特性-优先级
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-优先级</title><style>/* 技巧：选择器选中标签的范围越大，优先级/权重越低 */div {color: green;}/* !important 提权功能，提高权重/优先级到最高，慎用 */* {color: red !important;}.box {color: blue;}#test {color: orange;}</style>
</head>
<body><div class="box" id="test" style="color: purple;">div 标签</div>
</body>
</html>10、优先级-叠加计算
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>权重叠加-第一题</title><style>/* 行内样式，id选择器个数，类选择器个数，标签选择器个数 *//* (0,0,2,1) */.c1 .c2 div {color: blue;}/* (0,1,0,1) */div #box3 {color: green;}/* (0,1,1,0) */#box1 .c3 {color: orange;}/* 显示橙色 */</style>
</head>
<body><div id="box1" class="c1"><div id="box2" class="c2"><div id="box3" class="c3">这行文本是什么颜色的？</div></div></div>
</body>
</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>div p {color: red;}/* 继承权重最低 */.father {color: blue;}/* 显示红色 */</style>
</head>
<body><div class="father"><p class="son">文字</p></div>
</body>
</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>/* (0,2,0,0) */#father #son {color: blue;}/* (0,1,1,1) */#father p.c2 {color: black;}/* (0,0,2,2) */div.c1 p.c2 {color: red;}/* 继承优先级最低 */#father {color: green !important;}/* 继承优先级最低 */div #father .c1 {color: yellow;}/* 显示蓝色 */</style>
</head>
<body><div id="father" class="c1"><p id="son" class="c2">这行文本是什么颜色的？</p></div>
</body>
</html>11、Emmet写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Emmet写法</title><style>div {width: 30px;height: 50px;}</style>
</head>
<body><div></div><p class="box"></p><div class="box"></div><p id="box"></p><div></div><p></p><div><p></p></div><span></span><span></span><span></span><div>111</div>
</body>
</html>12、背景图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图</title><style>div {/* 盒子是 400*400 */width: 400px;height: 400px;/* 背景图默认是平铺（复制）的效果 */background-image: url(./images/cat.png);}</style>
</head>
<body><div>div 标签</div>
</body>
</html>13、背景图平铺方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图平铺方式</title><style>div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/cat.png);/* 不平铺：盒子的左上角显示一张背景图 */background-repeat: no-repeat; /* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */}</style>
</head>
<body><div>div 标签</div>
</body>
</html>14、背景图位置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图位置</title><style>div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/cat.png);background-repeat: no-repeat; /* 左上角 *//* background-position: 0 0; *//* background-position: left top; *//* 右下角 *//* background-position: right bottom; *//* 水平：正数向右，负数向左 *//* background-position: 50px 0; *//* background-position: -50px 0; *//* 垂直：正数向下，负数向上 *//* background-position: 0 100px; *//* background-position: 0 -100px; *//* background-position: 50px center; *//* 特殊写法 *//* background-position: bottom left; *//* 关键字可以只写一个，另一个方向居中 *//* background-position: bottom; *//* 只写一个数字表示水平方向，垂直方向居中 */background-position: 50px;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>15、背景图缩放
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图缩放</title><style>div {width: 500px;height: 300px;background-color: pink;background-image: url(./images/cat.png);background-repeat: no-repeat; /* contain:如果图的宽高跟盒子尺寸相等停止缩放，可能导致盒子有露白 *//* background-size: contain; *//* cover:图片完全覆盖盒子，可能导致图片显示不全 *//* background-size: cover; *//* 100%:图片的宽度跟盒子宽度一样，图片的高度按照比例等比例缩放 */background-size: 100%;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>16、背景图固定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图固定</title><style>body {background-image: url(./images/bg.jpg);background-repeat: no-repeat;background-position: center top;background-attachment: fixed;}</style>
</head>
<body><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p>
</body>
</html>17、背景图复合属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图复合属性</title><style>div {width: 400px;height: 400px;background: pink url(./images/cat.png) no-repeat center bottom/cover;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>18、显示模式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示模式</title><style>/* 块级：独占一行；宽度默认是父级100%；加宽高生效 */div {width: 100px;height: 100px;}.div1 {background-color: brown;}.div2 {background-color: orange;}/* 行内：一行共存多个；尺寸由内容撑开；加宽高不生效 */span {width: 200px;height: 200px;}.span1 {background-color: brown;}.span2 {background-color: orange;}/* 行内块：一行共存多个；默认尺寸由内容撑开；加宽高生效 */img {width: 100px;height: 100px;}</style>
</head>
<body><!-- 块元素 --><div class="div1">div 标签1</div><div class="div2">div 标签2</div><!-- 行内元素 --><span class="span1">span11111</span><span class="span2">span2</span><!-- 行内块元素 --><img src="./images/cat.png" alt=""><img src="./images/cat.png" alt="">
</body>
</html>19、显示模式转换
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示模式转换</title><style>/* 块级：独占一行；宽度默认是父级100%；加宽高生效 */div {width: 100px;height: 100px;/* display: inline-block; */display: inline;}.div1 {background-color: brown;}.div2 {background-color: orange;}/* 行内：一行共存多个；尺寸由内容撑开；加宽高不生效 */span {width: 200px;height: 200px;/* display: block; */display: inline-block;}.span1 {background-color: brown;}.span2 {background-color: orange;}/* 行内块：一行共存多个；默认尺寸由内容撑开；加宽高生效 */img {width: 100px;height: 100px;display: block;}</style>
</head>
<body><!-- 块元素 --><div class="div1">div 标签1</div><div class="div2">div 标签2</div><!-- 行内元素 --><span class="span1">span11111</span><span class="span2">span2</span><!-- 行内块元素 --><img src="./images/cat.png" alt=""><img src="./images/cat.png" alt="">
</body>
</html>20、综合案例1-热词
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>热词</title><style>/* 默认效果 */a {display: block;width: 200px;height: 80px;background-color: #3064bb;color: #fff;text-decoration: none;text-align: center;line-height: 80px;font-size: 18px;}/* 鼠标悬停的效果 */a:hover {background-color: #608dd9;}</style>
</head>
<body><a href="#">HTML</a><a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Vue</a><a href="#">React</a>
</body>
</html>21、综合案例2-banner效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>banner效果</title><style>.banner {height: 500px;background-color: #f3f3f4;background-image: url(./images/bk.png);background-repeat: no-repeat;background-position: left bottom;/* 文字控制属性，继承给子级 */text-align: right;color: #333;}.banner h2 {font-size: 36px;font-weight: 400;line-height: 100px;}.banner p {font-size: 20px;}.banner a {width: 125px;height: 40px;background-color: #f06b1f;display: inline-block;text-align: center;line-height: 40px;color: #fff;text-decoration: none;font-size: 20px;}</style>
</head>
<body><div class="banner"><h2>让创造产生价值</h2><p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p><a href="#">我要报名</a></div>
</body>
</html>
)
