网络日志

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