CSS复合选择器
1. 后代选择器(包含选择器)
可以选择父元素里面的子元素。
/*表示选择元素1里面的所有元素2*/
元素1 元素2 {样式声明}
eg.
/*选择ol里面所有的li标签元素改为蓝色*/
ol li {
color: blue;
}
注:
元素1和元素2 中间用空格隔开
元素1是父级,元素2是子级,最终选择的是元素2
元素2只要是元素1的后代即可
针对最后一条写一个例子。
- 我想变成蓝色
/*CSS样式的后代选择器写为如下*/
.demo li span {
color: blue;
}
2. 子元素选择器(子选择器)
只能选择某元素的最近一级子元素(只选择儿子,不选择其余后代)。
/*表示选择元素1里面的所有直接后代(子元素)元素2*/
元素1>元素2 {样式声明}
eg.
我是儿子1
我是孙子1
我是儿子2
我是孙子2
/*选择div里面所有最近一级p标签元素,字体大小改为12px*/
/*选中的是儿子*/
div > p {
font-size: 12px;
}
注:
元素1和元素2中间用“>”隔开
元素1是父级,元素2是子级,最终选择的是元素2
元素2必须是亲儿子,与剩余后代无关
3. 并集选择器
可以选择多组标签,同时为它们定义相同的样式。
通常用于集体声明。
/*表示选择元素1和元素2*/
元素1,元素2 {样式声明}
我和div里的文本都会变成蓝色
我和span里的文本都会变成蓝色
/*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伪类选择器
用于选取获得焦点的表单元素,焦点就是光标。
一般情况下,类表单元素才能获取,所以这个选择器主要针对于表单元素来说。
eg.
/*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
总结
以上是编程之家为你收集整理的CSS复合选择器全部内容,希望文章能够帮你解决CSS复合选择器所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。