伪类选择器
学习目标
伪类选择器
- :first-child 选择器：匹配其父元素中的第一个子元素。
- :last-child 选择器：用来匹配父元素中最后一个子元素。
- :nth-child(n) 选择器：匹配父元素中的第 n 个子元素，元素类型没有限制。奇数和偶数是可以作为关键字使用，用于相匹配的子元素，其索引是odd等同于nth-child(2n-1)或even等同于nth-child(2n)，nth-child(an+b) 公式计算 n可以为0。
- :before 选择器在被选元素的“内容”前面插入内容，用来和content属性一起使用。
- :after选择器在被选择元素的“内容”后面插入内容，用来和content属性一起使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
div p:first-child{
color:red;
}
div p:last-child{
color:red;
}
div p:nth-child(2){
color:green
}
div p:nth-child(odd){
color:blue;
}
div p:nth-child(even){
color:yellow;
}
div p:nth-child(3n+1){
color:yellow;
}
i:before{
content:"H";
}
i:after{
content:"d";
}
</style>
</head>
<body>
<div>
<p>子元素</p>
<p>子元素</p>
<p>子元素</p>
<p>子元素</p>
<span>子元素</span>
<p>子元素</p>
<p>子元素</p>
<p>子元素</p>
</div>
<div>
<p>子元素</p>
</div>
<div>
文字内容
</div>
<div>
</div>
<div></div>
<i>ello worl</i>
</body>
</html>
课程总结
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
