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指定类名,然后通过类名使用链接伪类选择器。
链接伪类选择器注意事项:
- 为了确保生效,请按照LVHA的顺序声明。(:link -> :visited -> :hover -> :active)
- 因为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 |