关于前端: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 时，背景会变成黄色。