一、CSS复合选择器
复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）
二、CSS复合选择器分类
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器
11.复合选择器.png
2.1 后代选择器
后代选择器又称为包含选择器，可以选择父元素里面所有子元素。
语法：把父标签写在前面，子标签写在后面，中间用空格分隔。
后代选择器.png
注意：
1.元素1和元素2之间用空格隔开。
2.元素1 和 元素2 可以是任意基础选择器
3.被选择的是元素1的后代元素2，元素1本身不被影响。
<style>
/* !-- 需求：将ul里面的li变成粉色 */
ul li {
color: pink;
}
/* 需求：将第二个ul里的li变为蓝色 */
.nav li {
color: blue;
}
/* 需求：将div的儿子和孙子变成黄色 */
/* 被改变的只是父元素里的子元素，父元素本身不被影响 */
div p {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>ul的第一个儿子</li>
<li>ul的第二个儿子</li>
<li>
<p>ul的第一个孙子</p>
<p>ul的第二个孙子</p>
</li>
</ul>
<ul class="nav">
<li>2ul的第一个儿子</li>
<li>2ul的第二个儿子</li>
<li>
<p>2ul的第一个孙子</p>
<p>2ul的第二个孙子</p>
</li>
</ul>
<div>
div的文字
<p>
div的儿子
<p>div的孙子</p>
</p>
</div>
后代选择器1.png
2.2 子选择器
只能选择作为某元素的最近一级子元素，选亲儿子元素.
语法：把父标签写在前面，子标签写在后面，中间用">"分隔。
11.子代选择器.png
注意：
1.元素1 和 元素2 中间用 大于号 隔开
2.元素2 必须是亲儿子，即最近的元素，其孙子、重孙之类都不归他管
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子选择器</title>
<!-- 只会改变离父选择器最近的子元素 -->
<style>
/*1.需求：将所有猪变大*/
div a {
font-size: 30px;
}
/*2.需求：将猪头变成红色*/
/* 子代选择器只会选择离父元素最近的子元素 */
div>a {
color: red;
}
/*3.需求：用子代选择器将猪尾巴变成绿色*/
div>ul>li>p>a {
color: green;
}
</style>
</head>
<body>
<!-- 关系分析：div中，p,a,ul是离他最近的子元素(亲儿子)，li是它的孙子，li里面的a和p是它的重孙子 -->
<div>
<p>对比</p>
<a href="#">猪头</a>
<ul>
<li><a href="#">猪脑</a></li>
<li>
<p>
<a href="#">猪尾巴</a>
</p>
</li>
</ul>
</div>
</body>
</html>
11.子代选择器2.png
2.3 并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式。
通常用于集体声明。并集选择器是各选择器通过英文逗号","连接而成，任何形式的选择器都可以作为并集选择器的一部分。
11.并集选择器.png
注意：
1.元素1 和 元素2 中间用逗号隔开
2.一般竖着写
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<!-- 两个标签之间用英文逗号隔开，一般竖着写 -->
<style>
/* 1.需求：将猪头和猪肚子改为红色 */
div,
a {
color: red;
}
/* 1.需求：将猪脑和猪尾巴改为绿色 */
p,
.green {
color: green;
}
</style>
</head>
<body>
<div>猪头</div>
<p>猪脑</p>
<a href="#">猪肚子</a>
<ul>
<li>猪屁股</li>
<li class="green">猪尾巴</li>
</ul>
</body>
</html>
11.并集选择器2.png
2.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果
2.4.1 链接伪类选择器
a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接伪类</title>
<style>
/* :link和:visited只能给链接使用 */
/* :hover和:active可以为任何元素使用 */
/* 未点击过的标签 */
a:link {
color: #666;
text-decoration: none;
}
/* 已经点击过了的标签 */
a:visited {
color: yellow;
}
/* 鼠标移到链接上的时候 */
a:hover {
color: red;
text-decoration: underline;
}
/* 鼠标按下去还未松开的时候 */
a:active {
color: green;
}
div {
width: 100px;
height: 100px;
}
/* 鼠标经过div的时候 */
div:hover {
background-color: green;
}
/* 鼠标按下未松手的时候 */
div:active {
background-color: skyblue;
}
</style>
</head>
<body>
<a href="#">链接1</a>
<a href="https://baidu.com">对比</a>
<div>:hover和:active可以为任何元素使用</div>
</body>
</html>
11.链接伪类选择器.gif
注意：
1.为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
2.链接标签都是需要单独设定样式,不能简写或者连写。
2.4.2 focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
<style>
/* 光标选定输入框时候 */
input:focus {
color: pink;
background-color: gray;
}
textarea:focus {
color: red;
background-color: green;
}
</style>
</head>
<body>
输入框1：<input type="text" name="" id=""><br>
文本域：
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
11.focus选择器.gif
网友评论