#大有学问#

定义

结构伪类选择器是指根据文档结构来选择目标元素。

常用于筛选父级选择器的子元素。

分类

结构伪类选择器可分为两种：

第一种：将父元素中所有子元素按照文档结构统一进行排序，并按照此元素总数序号进行确定目标元素。

举个例子：在一间教室中有10个学生，不分男女，按照座位前后进行排序。则序号就是1-10。

HTML代码结构统一

<div>  <p>子元素1</p>  <div>子元素2</div>  <p>子元素3</p>  <div>子元素4</div>  <p>子元素5</p>  <div>子元素6</div></div>

语法

父元素 子元素标签名:first-child {}

代码练习

div p:first-child {  color: purple;}

语法

父元素 子元素标签名:last-child {}

代码练习

div div:last-child {  color: blue;}

n的值都是按照子元素总体数量统一排序。

其中n不仅仅可以是一个数字，还可以是even偶数、odd奇数、公式n。

语法

父元素 子元素标签名:nth-child(n) {}

当n为数字序号的代码练习

div p:nth-child(3) {  background-color: red;}div div:nth-child(4) {  background-color: aquamarine;}div p:nth-child(5) {  background-color: pink;}div div:nth-child(6) {  background-color: brown;}

新的统一HTML结构代码

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li></ul>

当n为even偶数的代码练习

ul li:nth-child(even) {  color: red;}

当n为odd奇数的代码练习

ul li:nth-child(odd) {  color: blue;}

当n为公式的代码练习

2n=even偶数；

2n+1=odd奇数；

5n：5的倍数

n+5：从第五个子元素（包含）开始至最后一个子元素；

-n+5：前五个子元素，包含第五个子元素

时间有限，有兴趣的可以自己练习。

第二种：将父元素中子元素按照标签类型进行分类，之后在各类型标签数量中分别排序，且使用时排序序号与标签类型需要一致。

还是举个例子：在一间教室中有10个学生，按照性别类型分类排序，男生排序1-5，女生排序1-5。

HTML代码结构统一

<section>  <p>子元素1</p>  <div>子元素2</div>  <p>子元素3</p>  <div>子元素4</div>  <p>子元素5</p>  <div>子元素6</div></section>

语法

父元素 子元素标签名:first-of-type {}

代码练习

/* first-of-type:某一类型标签中的第一个标签 */section p:first-of-type {  color: red;}section div:first-of-type {  color: blue;}

语法

父元素 子元素标签名:last-of-type {}

代码练习

section p:last-of-type {  color: pink;}section div:last-of-type {  color: purple;}

和nth-child(n)一样，n不仅仅可以是一个数字，还可以是even偶数、odd奇数、公式n。

语法

父元素 子元素标签名:nth-of-type {}

代码练习

section p:nth-of-type(2) {  background-color: antiquewhite;}section div:nth-of-type(2) {  background-color: red;}

这两种方式不同写法，差点给我绕晕了。

下篇文章再写伪元素选择器。

今天就到这里，拜~