CSS复合选择器

CSS复合选择器

1. 后代选择器（包含选择器）

可以选择父元素里面的子元素。

/*表示选择元素1里面的所有元素2*/
元素1 元素2 {样式声明}

eg.
/*选择ol里面所有的li标签元素改为蓝色*/
ol li {
    color: blue;
}

注：

• 元素1和元素2 中间用空格隔开
• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2只要是元素1的后代即可
• 元素1和元素2可以是任意基础选择器（基础选择器可以查看上一篇博客->https://www.cnblogs.com/chiYiN-zZZ/p/13428522.html ）

针对最后一条写一个例子。

<ol class="demo">
    <li></li>
    <li></li>
    <li><span>我想变成蓝色</span></li>
</ol>

/*CSS样式的后代选择器写为如下*/
.demo li span {
    color: blue;
}

2. 子元素选择器（子选择器）

只能选择某元素的最近一级子元素（只选择儿子，不选择其余后代）。

/*表示选择元素1里面的所有直接后代(子元素)元素2*/
元素1>元素2 {样式声明}

eg.
<div>
    <p>我是儿子1
        <p>我是孙子1</p>
    </p>
    <p>我是儿子2
        <p>我是孙子2</p>
    </p>
</div>

/*选择div里面所有最近一级p标签元素,字体大小改为12px*/
/*选中的是儿子*/
div > p {
    font-size: 12px;
}

注：

• 元素1和元素2中间用“>”隔开
• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2必须是亲儿子，与剩余后代无关

3. 并集选择器

可以选择多组标签，同时为它们定义相同的样式。

通常用于集体声明。

/*表示选择元素1和元素2*/
元素1, 元素2 {样式声明}

<span>我和div里的文本都会变成蓝色</span>
<div>
    我和span里的文本都会变成蓝色
</div>

/*CSS样式的并集选择器写为如下*/
span,
div {
    color: blue;
}

注：

• 元素1和元素2中间用“,”隔开
• 书写时建议竖着写

4. 链接伪类选择器

类型	作用
a:link	选择所有未被点击的链接
a:visited	选择所有已被点击的链接
a:hover	选择鼠标经过的链接
a:active	选择鼠标按下未弹起的链接

也可以为a指定类名，然后通过类名使用链接伪类选择器。

链接伪类选择器注意事项：

1. 为了确保生效，请按照LVHA的顺序声明。（:link -> :visited -> :hover -> :active）
2. 因为a链接在浏览器中具有默认样式（颜色为蓝色，有下划线等），所以在实际工作中都需要给链接单独指定样式。

链接伪类选择器在实际工作开发中的写法：

a {
    color: gray;
}

a:hover {
    color: red;/*鼠标经过的时候，由原来的灰色变成了红色*/
}

5. :focus伪类选择器

用于选取获得焦点的表单元素，焦点就是光标。

一般情况下，<input>类表单元素才能获取，所以这个选择器主要针对于表单元素来说。

eg.
<input type="text" value="我想获得光标后背景颜色就变成红色">

/*CSS样式的:focus伪类选择器写为如下*/
input:focus {
    background-color: red;
}

6. 总结

选择器	作用	特征	使用情况	用法
后代选择器	选择后代元素	可以是子孙后代	较多	.demo span
子元素选择器	选择最近一级后代元素	只选择亲儿子	较少	.demo>span
并集选择器	选择某些具有相同样式的元素	可以用于集体声明	较多	.demo1, .demo2
链接伪类选择器	选择不同状态的链接	与链接相关	较多	a:link、a:visited、a:hover、a:active
:focus伪类选择器	选择获得光标的表单	与表单相关	较少	input:focus