18-序选择器
.para:only-of-type { color: red }
我是段落1
我是段落2
我是段落2
我是标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>18-序选择器</title>
<style>
/*
p:first-child{
color: red;
}
*/
/*
p:first-of-type{
color: blue;
}
*/
/*
p:last-child{
color: red;
}
*/
/*
p:last-of-type{
color: blue;
}
*/
/*
p:nth-child(3){
color: red;
}
*/
/*
p:nth-of-type(3){
color: blue;
}
*/
/*
p:nth-last-child(2){
color: red;
}
*/
/*
p:nth-last-of-type(2){
color: red;
}
*/
/*
p:only-child{
color: purple;
}
*/
/*
p:only-of-type {
color: red;
}
*/
.para:only-of-type {
color: red;
}
</style>
</head>
<body>
<!--
CSS3中新增的选择器最具代表性的就是序选择器
1.同级别的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型
2.同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签
-->
<!--
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
-->
<p class="para">我是段落1</p>
<div>
<p class="para">我是段落2</p>
<p class="para">我是段落2</p>
<h1>我是标题</h1>
</div>
</body>
</html>
时间： 2024-10-19 20:39:15