概述
子元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*body > p:first-child {
background-color: yellow;
}
p:last-child {
background-color: yellow;
}
p:nth-child(odd) {
background-color: yellow;
}
p:first-of-type {
background-color: yellow;
}*/
p:last-of-type {
background-color: yellow;
}
</style>
</head>
<body>
<span>我是span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>hello</span>
</body>
</html>
属性
- :first-child
可以选中第一个子元素
body > p:first-child {
background-color: yellow;
}
- :last-child
可以选中最后一个子元素
p:last-child {
background-color: yellow;
}
- :nth-child
可以选中第一个子元素
- 该选择器后边可以指定一个参数，指定要选中第几个子元素
- even 表示偶数位置的子元素
- odd 表示奇数位置的子元素
p:nth-child(odd) {
background-color: yellow;
}
- 其他
- :first-of-type
- :last-of-type
- :nth-of-type
和:first-child 这些非常的类似
只不过 child，是在所有的子元素中排列
而 type，是在当前类型的子元素中排列
p:first-of-type {
background-color: yellow;
}
p:last-of-type {
background-color: yellow;
}
最后
以上就是懵懂裙子为你收集整理的CSS-子元素选择器子元素选择器的全部内容，希望文章能够帮你解决CSS-子元素选择器子元素选择器所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
![[css] display为inline-block会默认扩展为父元素的高度吗display为inline-block会默认扩展为父元素的高度吗](/uploads/reation/bcimg3.png)
发表评论 取消回复