在 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 时，背景会变成黄色。