css之选择器3-系列选择器

系列选择器

1、作用：
css3中新推出的选择器中，最具代表性的的9个，又称为序列选择器，过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个

2、格式
2.1 同级别
:first-child p:first-child 同级别的第一个
:last-child p:last-child 同级别的最后一个
:nth-child(n) 同级别的第n个
:nth-last-child(n) 同级别的倒数第n个

2.2 同级别同类型
:first-of-type 同级别同类型的第一个
:last-of-type 同级别同类型的最后一个
:nth-of-type(n) 同级别同类型的第n个
:nth-last-of-type(n) 同级别同类型的倒数第n个

2.3 其他
:only-of-type 同类型的唯一一个
:only-child 同级别的唯一一个

p:first-child { 
    color: red;
}
代表：同级别的第一个，并且第一个要求是一个p标签

<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>

这样的话第一个p和div中的第一个p都变成红色，

p:first-child {
    color: red;
}
代表：同级别的第一个，并且第一个要求是一个p标签

<h1>w我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>

这样的话只有div中的第一个p变红，因为在有在div内同一级别的第一个才是p

p:last-child {
    color: red;
}
代表：同级别的最后一个，并且最后一个要求是一个p标签

<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
</div>
<p>我是段落7</p>
这样的话只有6跟7都变红

p:nth-child(3) {
    color: red;
}
代表：同级别的第3个，并且第3个要求是一个p标签

<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落2”变红

p:nth-last-child(3) {
    color: red;
}
代表：同级别的倒数第3个，并且第3个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落6.1”和“我是段落5”被选中

<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>
#1、同级别同类型的第一个
p:first-of-type {
    color: red;
}
“我是段落1”和“我是段落6.1”被选中

#2、同级别同类型的最后一个
p:last-of-type {
    color: red;
}
“我是段落7”和“我是段落6.2”被选中

#3、同级别同类型的第n个
p:nth-of-type(2) {
    color: red;
}
“我是段落2”和“我是段落6.2”被选中

#4、同级别同类型的倒数第n个
p:nth-last-of-type(2) {
    color: red;
}
“我是段落5”和“我是段落6.1”被选中

#1、同类型的唯一一个
p:only-of-type {
    color: red;
}

<h1>我是标题</h1>
<div>
    <p>我是段落6.1</p>
    <p>我是段落6.2</p>
    <h1>我是标题</h1>
</div>
<p>我是段落7</p>

“我是段落7“被选中

#2、同级别的唯一一个
p:only-child {
    color: red;
}

<h1>我是标题</h1>
<div>
    <p>我是段落6.1</p>
</div>
<p>我是段落7</p>
“我是段落6.1”被选中