05 css的复合选择器

后代选择器（常用重要）

• 后代选择器又称为包含选择器， 可以选择父元素里面的子元素，中间用逗号分隔
• 当标签发生嵌套时，内部标签就成为外部标签的后代

元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2

• 元素2可以是儿子， 也可以是孙子登， 只要是元素1的后代即可
• 元素1和元素2可以是任意基础选择器

子选择器（重要）

子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素， 和孙子无关

元素1>元素2 { 样式声明 }

上述语法表示选择元素1里面左右直接后代（子元素）元素2

并集选择器

• 并集选择器可以选择多组标签, 同时为他们定义相同的样式. 通常用于集体声明
• 并集选择器时各选择器通过英文逗号(,)连接而成, 任何形式的选择器都可以作为并集选择器的一部分

元素1,元素2 { 样式声明 }

上述语法表示选择元素1和元素2

• 并集选择器一般竖着写

div,
p,
.pig {
  color: pink;
}

伪类选择器

伪类选择器用于向某些选择器添加特殊效果, 比如给链接添加特殊效果, 或选择第1个, 第n个元素

• 伪类选择器书写最大的特点是用冒号(:)表示, 比如:hover, :first-child

链接伪类选择器

a:link        /* 选择所有为被访问过的链接 */
a:visited    /* 选择所有已被访问过的链接 */
a:hover        /* 选择鼠标指针位于器上的链接 */
a:active    /* 选择活动链接(鼠标按下未弹起的链接) */

正常链接为:link颜色 (直接设置a {}即可, 不需要:link)

:focus伪类选择器

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

• 焦点就是光标, 一般情况<input>类表单元素才能获取, 因此这个选择器也主要针对于表单元素来说

input:focus {
    
    
    background-color: yellow;
}

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代	可以是子孙后代	较多	空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	大于 .nav>a
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	逗号 .nav .header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover{}
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus{}