从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）
复习：从零开始学前端：CSS背景颜色 — 今天你学习了吗？（CSS：Day09）
文章目录
前言
发现眼睛看一遍，第二天该用的时候还是想不起来，所以打算尽量抽时间定时在重新过一遍，敲代码重新过一遍，知识点重新过一遍。。。给自己加油！
第十节课：CSS复合选择器
一、复合选择器
复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
优点：
- 复合选择器可以更准确、更高效的选择目标元素（标签）；
- 复合选择器是有两个或多个基础选择器，通过不同的方式组合而成的；
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。
二、后代选择器
后代选择器又称为包含选择器，可以选择父元素里的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套式。内层标签就成为外层标签的后代。
语法：
元素1 元素2 {样式声明}
注意点:
- 元素1和元素2中间一定要空格隔开；
- 元素1是父级，元素2是子级，最终选择的是元素2；
- 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可；
- 元素1和元素2可以是任意的基础选择器。
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>后代选择器</title>
<style>
div div{
color: aqua;
}
</style>
</head>
<body>
<div>
<p>段落一</p>
<p>段落二</p>
<div>
第一个div
<div>第一个div的孩子</div>
</div>
<div>
第二个div
</div>
</div>
</body>
</html>
三、子选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
使用的符号：>
语法：
元素1>元素2 {样式声明}
注意点:
- 元素1和元素2之间用大于号隔开；
- 元素1是父级，元素2是子级，最终选择的是元素2；
- 元素2必须是亲儿子，左右亲儿子都可以选择，其孙子、后代之类的都不归他管。
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>复合选择器</title>
<style>
div>p{
color: red;
}
</style>
</head>
<body>
<div>
初始div
<p>段落一</p>
<p>段落二</p>
<div>
第一个div
<a>第一个div的孩子</a>
<p>第2个div的孩子</p>
<p>第3个div的孩子</p>
</div>
<div>
第二个div
</div>
</div>
</body>
</html>
四、兄弟选择器
兄弟选择器使用符号：+，可以除了子级集体声明，选择的元素就是除了自身，选择其他的兄弟元素只有后面的前面的不管。
语法：
元素1+元素2 {样式声明}
注意点：
- 元素1和元素2中间用加号隔开；
- 元素2是元素1的兄弟，最终选择的是除了元素1的其他元素；
例子：
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>复合选择器</title>
<style>
div+p{
color: rgb(134, 238, 179);
}
</style>
</head>
<body>
<div>
初始div
<p>段落一</p>
<p>段落二</p>
<div>
第一个div
<a>第一个div的孩子</a>
<p>第2个div的孩子</p>
<p>第3个div的孩子</p>
</div>
<p>段落三</p>
<p>段落四</p>
<div>
第二个div
</div>
</div>
</body>
</html>
效果图：
五、并集选择器
并集选择器是个选择器通过英文“,”连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法：
元素1，元素2{样式声明}
注意点：
- 元素1和元素2中间用逗号隔开，都好可以理解为和的意思；
- 并集选择器可以选择多组标签，同时他们定义相同的样式，通过常用于集体声明。
例子：
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>复合选择器</title>
<style>
a,p{
color: rgb(231, 157, 122);
}
</style>
</head>
<body>
<div>
初始div
<p>段落一</p>
<p>段落二</p>
<em>rtyu</em>
<div>
第一个div
<a>第一个div的孩子</a>
<p>第2个div的孩子</p>
<p>第3个div的孩子</p>
</div>
<a>123</a>
<p>段落三</p>
<p>段落四</p>
<div>
第二个div
</div>
</div>
</body>
</html>
效果：
六、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。伪类选择器书写最大的特点是用冒号“:”,比如:hover、:first-child。伪类选择器有几种。
- 链接伪类选择器
- ：focus伪类选择器
- 结构伪类选择器
例子：
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>复合选择器</title>
<style>
p:first-child{
color: plum;
}
</style>
</head>
<body>
<div>
<p>伪类选择器</p>
<p>这是一个段落</p>
</div>
</body>
</html>
效果：
七、链接伪类选择器
- a:link：选择所有未被访问的链接
- a:visited：选择所有已被访问的链接
- a:hover：当鼠标移动在链接上产生的样式（最常用）
- a:active：选择活动链接（鼠标按下未弹起的链接）
注意：
为了确保生效，请按照顺序声明:link、:visited、:hover、:active。
因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。在实际开发中最常用的是a:hover
例子：
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>复合选择器</title>
<style>
a:link{
color: rgb(0, 0, 0);
text-decoration: none;
}
a:visited{
color: skyblue;
}
a:active{
color: red;
}
a:hover{
color: pink;
font-size: 18px;
}
</style>
</head>
<body>
<div>
<p>伪类选择器</p>
<p><a href="#">这是一个显示链接</a></p>
</div>
</body>
</html>
效果图：
点击前：
鼠标悬停时：
点击时：
点击后：
八、focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
语法：
input:focus{样式1；样式2}
例子：
hml文件：
<!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>复合选择器</title>
<style>
/* table{
border-collapse: collapse;
} */
input:focus{
background-color: thistle;
}
</style>
</head>
<body>
<table border="0px">
<tr>
<th colspan="2">登录</th>
</tr>
<tr>
<th>账户：</th>
<th>
<input type="text">
</th>
</tr>
<tr>
<th>密码：</th>
<th>
<input type="password">
</th>
</tr>
</table>
</body>
</html>
效果：
点击后聚焦：
九、结构伪类选择器
- first-child：选择父元素里面的第一个儿子
- last-child：选择父元素里面的最后一个儿子
- nth-child(n)：选择父元素里面的某一个，n填自然数从1开始，代表意思选择到父元素里面第n个元素。n的值也可以是odd、even，“odd”代表队是基数，even代表偶数（table各行换色），或者也可以写表达式，（2n+1）取值从0开始。
- nth-of-type(n)：选择父元素内具有指定类型元素的第几个。比如
.nav li p:nth-of-type(2)这里写的代表的意思就是选择ul父元素里面子元素p的第二个（想看元素，再看个数）
例子：
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>复合选择器</title>
<style>
div p:first-child{
color: plum;
}
p:last-child{
color: royalblue;
}
div>p:nth-child(2){
color: rgb(169, 228, 194);
}
div ul li p:nth-of-type(3){
color: tomato;
}
</style>
</head>
<body>
<div>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<ul>
<li>无序列表
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<p>你好</p>
<p>你好</p>
</div>
</body>
</html>
效果：
十、复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 使用符号 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 空格隔开 |
| 子选择器 | 选择最近一级元素 | 只能选择亲儿子 | 较少 | 使用>符号 |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 使用, |
| 兄弟选择器 | 可选择紧接在元素后的元素 | 就是选择兄弟 | 较少 | 使用“+” |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | a:hover |
:focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus |
| 结构伪类选择器 | 选择所需要的标签 | 根据需要使用不同的结构伪类选择器 | 较少 | – |
十一、练习
table结合编写：
源码：
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>Hover</title>
<link rel="stylesheet" href="hover.css">
</head>
<body>
<div>
<table border="0px">
<tr class="head">
<!-- <th></th> -->
<th colspan="5">
全部商品分类
</th>
<th class="img">
<img src="./img/arrow-down.gif" alt="">
</th>
</tr>
<tr class="body">
<!-- <td> </td> -->
<td class="img">
<img src="./img/arrow-icon.gif" alt="">
</td>
<td>图书</td>
<td>图像</td>
<td colspan="2">数字商品</td>
<td class="img">
<img src="./img/arrow-right.gif" alt="">
</td>
</tr>
<tr>
<!-- <td></td> -->
<td class="img">
<img src="./img/arrow-icon.gif" alt="">
</td>
<td>家用电器</td>
<td>手机</td>
<td colspan="2">数码</td>
<td class="img">
<img src="./img/arrow-right.gif" alt="">
</td>
</tr>
<tr>
<!-- <td></td> -->
<td class="img">
<img src="./img/arrow-icon.gif" alt="">
</td>
<td>电脑</td>
<td colspan="3">办公</td>
<td class="img">
<img src="./img/arrow-right.gif" alt="">
</td>
</tr>
<tr>
<!-- <td></td> -->
<td class="img">
<img src="./img/arrow-icon.gif" alt="">
</td>
<td>家居</td>
<td>家装</td>
<td colspan="2">厨具</td>
<td class="img">
<img src="./img/arrow-right.gif" alt="">
</td>
</tr>
<tr>
<!-- <td></td> -->
<td class="img">
<img src="./img/arrow-icon.gif" alt="">
</td>
<td>服饰</td>
<td>鞋帽</td>
<td colspan="2">个护化妆</td>
<td class="img">
<img src="./img/arrow-right.gif" alt="">
</td>
</tr>
<tr>
<!-- <td></td> -->
<td class="img">
<img src="./img/arrow-icon.gif" alt="">
</td>
<td>礼品箱包</td>
<td>钟表</td>
<td colspan="2">珠宝</td>
<td class="img">
<img src="./img/arrow-right.gif" alt="">
</td>
</tr>
<tr>
<!-- <td></td> -->
<td class="img">
<img src="./img/arrow-icon.gif" alt="">
</td>
<td>食品饮料</td>
<td colspan="3">保健食品</td>
<td class="img">
<img src="./img/arrow-right.gif" alt="">
</td>
</tr>
<tr>
<!-- <td></td> -->
<td class="img">
<img src="./img/arrow-icon.gif" alt="">
</td>
<td>彩票</td>
<td>旅行</td>
<td>充值</td>
<td>票务</td>
<td class="img">
<img src="./img/arrow-right.gif" alt="">
</td>
</tr>
</table>
</div>
</body>
</html>
CSS文件：
.head{
color: seashell;
background-color: red;
}
.head th{
text-align: left;
}
.head th:hover{
color: black;
font-size: 18px;
}
.img{
width: 20px;
text-align: right;
}
tr td{
font-size: 14px;
width: 70px;
}
table{
border-collapse: collapse;
line-height: 20px;
background-color: rgb(215,215,215);
}
table tr td:hover{
color:lightcoral;
font-size: 16px;
}
直接div编写：
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>商品分类</title>
<link rel="stylesheet" href="./css/商品分类.css">
</head>
<body>
<div>
<h2>全部商品分类</h2>
<ul>
<li>
<img src="../img/arrow-icon.gif" alt="">
<a href="1">图书</a>
<a href="2">图像</a>
<a href="3">数字商品</a>
</li>
<li>
<img src="../img/arrow-icon.gif" alt="">
<a href="11">家用电器</a>
<a href="12">手机</a>
<a href="13">数码</a>
</li>
<li>
<img src="../img/arrow-icon.gif" alt="">
<a href="21">电脑</a>
<a href="22">办公</a>
</li>
<li>
<img src="../img/arrow-icon.gif" alt="">
<a href="31">家居</a>
<a href="32">家装</a>
<a href="33">厨具</a>
</li>
<li>
<img src="../img/arrow-icon.gif" alt="">
<a href="41">服饰</a>
<a href="42">鞋帽</a>
<a href="43">个护化妆</a>
</li>
<li>
<img src="../img/arrow-icon.gif" alt="">
<a href="51">礼品箱包</a>
<a href="52">钟表</a>
<a href="53">珠宝</a>
</li>
<li>
<img src="../img/arrow-icon.gif" alt="">
<a href="61">食品饮料</a>
<a href="62">保健食品</a>
</li>
<li>
<img src="../img/arrow-icon.gif" alt="">
<a href="71">彩票</a>
<a href="72">旅行</a>
<a href="73">充值</a>
<a href="74">票务</a>
</li>
</ul>
</div>
</body>
</html>
CSS文件：
div{
/* height: 300px; */
width: 250px;
background-color: rgb(215,215,215);
}
h2{
color: burlywood;
font-size: 20px;
/* height: 40px; */
line-height:40px;
text-indent: 2em;
background: rgb(220,20,60) url(../../img/arrow-down.gif) no-repeat right bottom;
background-size: 25px;
}
a{
/* background-attachment:固定背景图像，滚动还是固定 */
/* 下划线、上划线、删除线 */
text-decoration: none;
color: black;
}
a:hover{
color: red;
font-size: 16px;
}
ul{
height: 200px;
/* background-color: green; */
list-style-type: none;
}
ul li{
background: rgb(215,215,215) url(../../img/arrow-right.gif) no-repeat right;
height: 24px;
font-size: 14px;
line-height: 24px;
}
预习： 从零开始学前端：复习课程 — 今天你学习了吗？（CSS：Day11）
------纸上得来终觉浅，绝知此事要躬行。
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
