CSS 复合选择器

在 CSS 中，选择器可以分为 基础选择器（可点击查看） 和复合选择器。复合选择器式在基础选择器的基础上组合而成。

复合选择器可以更准确、高效的选择目标元素，常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。

1、后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素。

/* 语法：元素1 元素2 { 样式 } */
ul li { color: red }

• 元素 li 是元素 ul 的子级，最终改变颜色的是 <li>
• 子元素和父元素要用空格分开
• 元素2 可以是元素1 的子级，也可以是元素1 的孙子级，只要是元素1 的后代即可
• 元素1 和 元素2 可以是任意的基础选择器

<style>
  div .nav { color: red }
</style>
<div>
  <p>
    <span>我没有什么特别的<span>
    <span class='nav'>我变成了红色的<span>
  </p>
</div>

2、子选择器

子元素选择器（子选择器）只能选择父元素的 直接子元素。

<style>
  div > span { color: red }
</style>
<div>
  <span>我变成了红色的<span>
  <p>
    <span>我没有什么特别的<span>
  </p>
</div>

• 父元素 和 子元素 中间用 大于号 隔开
• 第二个 span 不是 div 的直接子元素，最终变颜色的是第一个 span

3、并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。并集选择器中各选择器通过 “,”连接，任何形式的选择器都可以作为并集选择器的一部分。

<style>
  div, span { color: red }
</style>
<div>
  <div> 我是红色的 </div>
  <p>我没有什么特别的</p>
  <span>我也变成了红色的<span>
</div>

4、伪类选择器

4.1 链接伪类选择器

/* a:link 选择所有未被访问过的链接 */
a:link { ... 样式 }
/* a:visited 选择所有已被访问过的链接 */
a:visited { ... 样式 }
/* a:hover 选择鼠标指针正在停留的链接 */
a:hover { ... 样式 }
/* a:active 选择鼠标正在点击的链接 */
a:active { ... 样式 }

为了确保样式生效，请按照LVHA的顺序声明 :link - :visited - :hover - :active。

4.2 focus 伪类选择器

:focus 伪类选择器 用于选取获得焦点的表单元素。

一般情况 <input> 类表单元素才能获取焦点，因此 :focus 伪类选择器主要针对表单元素来说。

input:focus {
  background-color: yellow;
}

这样当鼠标点击 input 时，背景会变成黄色。