马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-3-4 18:25 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
记住结构伪类器(:nth-child(n)、:nth-last-child(n)、x:nth-of-type(n)、x:nth-last-of-type(n) )：
程序员都习惯从 0 开始，这个结构伪类算特例，要记住！
上面前两个是一对，后两个是一对。
:nth-child(n) 匹配第 n 个子元素。
:nth-last-child(n) 匹配倒数第 n 个子元素。
演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<style>
/* 选中第二个div中第一个子元素p */
p:nth-child(1) {
color: green;
}
/* 选中两个div中的倒数第二个子元素p */
p:nth-last-child(2) {
color: red;
}
</style>
</head>
<body>
<div style="border:1px solid;width: 222px">
<span>div1 中span</span>
<p>div1 中第一个段落。</p>
<p>div1 中的第二段落。</p>
<p>div1 中的最后一个段落。</p>
</div><br>
<div style="border:1px solid;width: 222px">
<p>div2 中第一个段落。</p>
<p>div2 中的第二段落。</p>
<p>div2 中的最后一个段落。</p>
</div>
</body>
</html>
x:nth-of-type(n) 元素 x 必须是某个父元素下的第 n 个子元素。
x:nth-last-of-type(n) 元素 x 必须是某个父元素下的倒数第 n 个子元素。
只修改样式：
<style>
/* 选中两个div中的倒数第二个子元素p */
p:nth-of-type(1) {
color: green;
}
/* 选中两个div中的最后一个子元素p */
p:nth-last-of-type(1) {
color: red;
}
</style>
如果上面效果都一样，何必搞两种呢？
没错，x:nth-of-type(n) 和 x:nth-last-of-type(n) 还有更多玩法：正/负范围，选择范围，奇偶范围。
详情参看宝典：传送门
例如：p:nth-last-of-type(odd) {}
锚点
:target 选择器结合 a 元素中的属性实现页面中酷炫的跳转。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<style>
:target {
border: 2px solid #D4D4D4;
background-color: #2ebb96;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p><a href="#fishc1">跳转至内容 1</a></p>
<p><a href="#fishc2">跳转至内容 2</a></p>
<p><a href="#fishc3">跳转至内容 3</a></p>
<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="fishc1"><b>内容 1...</b></p>
<p id="fishc2"><b>内容 2...</b></p>
<p id="fishc3"><b>内容 3...</b></p>
</body>
</html>
:target 修改锚点处样式。
:lang 和 :not 没难度，大家自行查宝典。
伪类与伪元素
小甲鱼老师给出的结论已经很通俗易懂：
接下来，稍微啰嗦下。
css 引入伪类和伪元素概念是为了格式化文档树以外的信息。
也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如：
下面分别对伪类和伪元素进行解释：
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
比如说，当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。
虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。
比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。
虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-2-14 11:04:35
置顶卡
千斤顶
显身卡
发表于 2020-3-13 07:26:56
发表于 2021-3-19 18:40:33
