039-结构伪类选择器（II）| css3
本帖最后由 liuzhengyuan 于 2020-3-30 21:41 编辑《零基础入门学习web开发》第39讲 初学 css 的噩梦 VI | 学习笔记
上一篇：038-结构伪类选择器（I）
思维导图：
:nth-child(n) & :nth-last-child(n) 不论元素的类型，从开头/最后一个子元素开始计数。
:nth-of-type(n) & :nth-last-of-type(n) 选择器匹配属于父元素的指定类型的正数/倒数第 n 个子元素。
详见 速查宝典 --> 传送门
☆ ☆ ☆of-type 还可以使用 很多玩法
比如：
p:nth-last-of-type(odd) {}
更多到速查宝典（传送门）
--不二（笔记）
回到原本的形式
程序1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>039</title>
<style>
p:nth-child(3) {
background-color: pink;
}
p:nth-last-child(4) {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<p>1 aaaaaaaaaaaaaaaaaaaaaaaaaaa p</p>
<span>2 bbbbbbbbbbbbbbbbbbbbbbbbbbb span</span>
<p>3 ccccccccccccccccccccccccccc p</p>
<p>4 ddddddddddddddddddddddddddd p</p>
<p>5 eeeeeeeeeeeeeeeeeeeeee p</p>
<p>6 fffffffffffffffffffff p</p>
<p>7 ggggggggggggggggggggg p</p>
<p>8 ssssssssssssssssssssssssssss p</p>
<span>9 ssstttttttttssssssss span</span>
<p>10 xxxxxxxxxxxxxxxxxxxxx p</p>
</body>
</html>
效果1：
为什么设置了倒数第 4 ，但是效果显示的是倒数第 3 呢？
038 讲过，VS code 会自己强制在代码后加一段 JS 代码
程序2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:nth-of-type(3) {
background-color: pink;
}
:nth-last-of-type(4) {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<p>1 aaaaaaaaaaaaaaaaaaaaaaaaaaa p</p>
<span>2 bbbbbbbbbbbbbbbbbbbbbbbbbbb span</span>
<p>3 ccccccccccccccccccccccccccc p</p>
<p>4 ddddddddddddddddddddddddddd p</p>
<p>5 eeeeeeeeeeeeeeeeeeeeee p</p>
<p>6 fffffffffffffffffffff p</p>
<p>7 ggggggggggggggggggggg p</p>
<p>8 ssssssssssssssssssssssssssss p</p>
<span>9 ssstttttttttssssssss span</span>
<p>10 xxxxxxxxxxxxxxxxxxxxx p</p>
</body>
</html>
效果：
· 更多（吹水笔记-不二如是）·
· 课后作业·
下一篇：039-其他伪类 + 网络锚点
如果喜欢，别忘了评分{:10_279:}：
https://xxx.ilovefishc.com/album/202003/26/115014z7o47g8gxmd4lzjt.gif
页:
[1]