最开始学结构伪类选择器的时候，我以为我懂了！但在我开始用的时候，我发现：噫？怎么不是这个样子吖？？？一脸问号。俗话说，好记性不如烂笔头，别人写的不如自己写，自己写一遍加深记忆，也容易理清其中的弯弯绕绕。
一、CSS选择器的分类
首先简要了解CSS选择器的分类，自己记的笔记，希望以后回来看还记得~
二、结构伪类选择器的用法
1.first-child
直译为：第一个子元素
语法格式：parent name:first-child{}，如果其前面省略了 parent就会寻找所有满足父标签下第一个子标签并且子标签符合 name的元素；
该选择器会选择所有 父标签下的第一个子标签，并且子标签符合 name（name为某个标签的标签名或class名或id名等）
看栗子1.1：
p,h1,h2{
height: 30px;
width: 300px;
border: 1px solid #00A2E9;
}
p:first-child {
background-color: #64b0ff;
}
<body>
<div class="box">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
<p>p7</p>
</body>
css中选择的首先是 p标签，其次该p标签还需要在其父元素的所有子标签中位于第一的位置。比如 p7也是p标签，但它相对于其父元素body标签来说是第二个子标签，所以无法选中，如果我们修改 p7的位置，将其修改到div之前，则也能选中，如栗子1.2
栗子1.2
p,h1,h2{
height: 30px;
width: 300px;
border: 1px solid #00A2E9;
}
p:first-child {
background-color: #64b0ff;
}
<body>
<p>p7</p>
<div class="box">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
2.last-child
直译为：最后一个子元素
语法格式：parent name:last-child{}，如果其前面省略了 parent就会寻找所有满足父标签下的最后一个子标签并且子标签符合 name的元素；
该选择器会选择所有 父标签下的第最后一个子标签，并且子标签符合 name（name为某个标签的标签名或class名或id名等）
直接看栗子2.1
p,h1,h2{
height: 30px;
width: 300px;
border: 1px solid #00A2E9;
}
p:last-child {
background-color: #64b0ff;
}
<body>
<div class="box">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
<p>p7</p>
</body>
栗子2.1：首先选择的是 p标签，p6标签相对于其父元素 div 来说是最后一个，故可以选择上。
但这里有一个 bug，不是很懂的地方，根据理解 p7 对于其父标签 body 来说是最后一个p标签，但是选择不上，所以这里有个和 first-child 的差别，first-child 可以 以 body 作为父标签，但last-child不可以。
3. nth-child()
语法格式：parent name:last-child(){}，如果其前面省略了 parent就会寻找所有满足父标签下的子标签符合 name的元素；
该选择器会选择所有父标签下具有特定规律或者指定位次的子标签，并且子标签符合 name（name为某个标签的标签名或class名或id名等）
我将括号中填的东西成为表达式，这玩意儿我自己定义的，便于理解罢了。
（1）括号中为固定数字 n ：就是选择父元素下第 n 个子标签，并且子标签要为符合选择器选择的标签。
栗子3.1
p,h1,h2{
height: 30px;
width: 300px;
border: 1px solid #00A2E9;
}
.box p:nth-child(1) {
background-color: #64b0ff;
}
<body>
<div class="box">
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<h1>h2</h1>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
注，本博客接下来讨论在固定父元素下的子元素选择情况，不涉及复杂情况的讨论举证，也不涉及 body 标签情况的讨论。
栗子3.1分析：
首先选择的是div盒子中的 p标签，括号中的数字表示选择 div 盒子中所有子元素按照代码顺序定义的第一个子标签，两者相同才可以被选中。
栗子3.2
p,h1,h2{
height: 30px;
width: 300px;
border: 1px solid #00A2E9;
}
.box p:nth-child(2) {
background-color: #64b0ff;
}
<body>
<div class="box">
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<h1>h2</h1>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
栗子3.2分析：
首先选择的是div盒子中的 p标签，括号中的数字表示选择 div 盒子中所有子元素按照代码顺序定义的第二个子标签，由于此时两者不符合，一个是p，一个是h1，所以此时没有任何选中。
栗子3.3
接下来假设我要选择第三个 h1 标签，那么前面就应该改成 h1，括号中应该改成 5 ，因为第三个h1标签在 div 盒子中所有子元素中排第五位。
p,h1,h2{
height: 30px;
width: 300px;
border: 1px solid #00A2E9;
}
.box h1:nth-child(5) {
background-color: #64b0ff;
}
<body>
<div class="box">
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<h1>h2</h1>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
栗子3.3结果：
（2）括号中为表达式类似于 2n+1 ：会选择一类具有特定规则的子标签，要注意的是 表达式中的 n是从 0开始，当表达式的值为 0 或负数时不起作用。
栗子3.4
p,h1,h2{
height: 30px;
width: 300px;
border: 1px solid #00A2E9;
}
.box p:nth-child(2n+1) {
background-color: #64b0ff;
}
<body>
<div class="box">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
栗子3.4结果
4.nth-of-type()
选择指定的类型，它与 child 类型的区别在于 type 系列会将父元素下所有符合的标签单独取出来，排列后选择
栗子4.1
p,h1,h2{
height: 30px;
width: 300px;
border: 1px solid #00A2E9;
}
.box h1:nth-of-type(3) {
background-color: #64b0ff;
}
<body>
<div class="box">
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<h1>h2</h1>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
栗子4.1选择div盒子下第三个h1标签，它会先把所有的h1标签先全部提取出来排列好之后在选择。
类似于下图，然后再在这个排列中选择你需要的第三个元素。
栗子4.1结果：
十二个。。。。。我才写了四个，噗~~~~~~~~~~~~不写了不写了，遇到问题了再回来补上好了，大概原理都差不多，其实没那么复杂，写这几个栗子整了一会儿。
今天就到这里吧~哇咔咔
5647
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
