039 - 初学CSS的噩梦（VI）
本帖最后由 不二如是 于 2020-3-4 18:25 编辑上一集： 038 - 初学CSS的噩梦（V）
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
记住结构伪类器(:nth-child(n)、:nth-last-child(n)、x:nth-of-type(n)、x:nth-last-of-type(n) )：
n 都是从 1 开始的
程序员都习惯从 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 没难度，大家自行查宝典。
伪类与伪元素
小甲鱼老师给出的结论已经很通俗易懂：
**** Hidden Message *****
接下来，稍微啰嗦下。
css 引入伪类和伪元素概念是为了格式化文档树以外的信息。
也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如：
一句话中的第一个字母，或者是列表中的第一个元素。
下面分别对伪类和伪元素进行解释：
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
比如说，当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。
虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。
比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。
虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：040 - 金木水火土
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ） 小姐姐加油 1 123 小姐姐讲的真不错 我爱鱼c
回复快快快~ {:5_108:} 11 "比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。"老师这里应该是"::before" 赞！ 1 11 假装有元素和类进行对其的装饰 棒 看看 {:10_254:} 学习了{:10_261:}
页:
[1]