CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。

1. 后代选择器

后代选择器又称为包含选择器

作用：用来选择元素或元素组的子孙后代

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

父级 子级{属性:属性值;属性:属性值;}

语法：

.class h3{color:red;font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代。

示例代码：

<!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>ul li {color: red;}ol li {color: green;}.demo1 ul li {color: blue;}</style>
</head><body><ul><li>青春正能量</li><li>青春正能量</li><li>青春正能量</li></ul><ol><li>青春正能量</li><li>青春正能量</li><li>青春正能量</li></ol><div class="demo1"><ul><li>青春正能量</li><li>青春正能量</li><li>青春正能量</li></ul></div>
</body></html>

2. 子元素选择器

作用：子元素选择器只能选择作为某元素子元素(亲儿子)的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

语法：

.class>h3{color:red;font-size:14px;}

示例代码：

<!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>div>p {color: red;}</style>
</head><body><div><p>青春正能量1</p><p><a href="#">青春正能量2</a></p></div><div><p><a href="#">青春正能量3</a></p></div><div><p>青春正能量4</p></div>
</body></html>

3. 并集选择器

如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。

并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。

示例代码：

<!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>div,span,.demo li {color: red;}</style>
</head><body><div>青春正能量1</div><p>青春正能量2</p><span>青春正能量3</span><ul><li>青春正能量4</li></ul><ol class="demo"><li>青春正能量5</li></ol>
</body></html>

4. 链接伪类选择器

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

伪类选择器很多，比如链接伪类，结构伪类等等。

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */

注意

写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。否则可能引起错误。

一般上面4个不全用，一般写法如下：

a {   /* a是标签选择器  所有的链接 */font-weight: 700;font-size: 16px;color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

示例代码：

<!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>a:link {color: #333;/*取消下划线*/text-decoration: none;}/*已经访问的链接  我们点击过*/a:visited {color: orange;}/*鼠标经过链接时候的状态*/a:hover {color: red;}/*当我们点击的时候（按下鼠标，别松开的时候）*/a:active {color: green;}</style>
</head><body><a href="http://www.baidu.com">百度</a>
</body></html>

这儿除了链接a可以用伪类选择器，别的标签也是可以的！

<!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>/*鼠标经过链接时候的状态*/p:hover {color: red;}</style>
</head><body><p>哈哈</p>
</body></html>

5. :focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
示例代码：

<!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>input:focus {/* 把获得光标的input表单选取出来 */background-color: pink;color: red;}</style>
</head><body><input type="text"><input type="text"><input type="text">
</body></html>