039 - 初学CSS的噩梦（VI）

不二如是 · 发表于 2020-2-14 11:04:35

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2020-3-4 18:25 编辑

上一集： 038 - 初学CSS的噩梦（V）

哈哈，废话不多说了，#敲黑板时刻！

在线视频：传送门

课程思维导图

猛戳

登录/注册后可看大图

超清

记住结构伪类器(: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 没难度，大家自行查宝典。

伪类与伪元素

小甲鱼老师给出的结论已经很通俗易懂：

游客，如果您要查看本帖隐藏内容请回复

接下来，稍微啰嗦下。

css 引入伪类和伪元素概念是为了格式化文档树以外的信息。

也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如：

一句话中的第一个字母，或者是列表中的第一个元素。

下面分别对伪类和伪元素进行解释：

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

比如说，当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。

虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。

比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。

虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：040 - 金木水火土

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅淘专辑（传送门）（不喜欢更要订阅

）

MYlindaxia · 发表于 2020-3-13 07:26:56

小姐姐加油

Fire4EVER · 发表于 2020-6-24 16:38:15

pym131420 · 发表于 2020-11-10 10:40:43

Kinco · 发表于 2020-11-14 12:31:01

小姐姐讲的真不错

trefrn · 发表于 2020-12-5 16:24:01

我爱鱼c

natapon · 发表于 2021-1-15 23:27:10

回复快快快~

笙歌醉梦 · 发表于 2021-1-20 17:25:18

只想白嫖 · 发表于 2021-2-21 14:01:08

莫比乌斯 · 发表于 2021-3-19 18:40:33

"比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。"老师这里应该是"::before"

O2H2O · 发表于 2021-7-9 12:02:50

赞！

zhangjunxian · 发表于 2021-7-22 14:06:21

心驰神往 · 发表于 2021-8-3 16:29:46

douTREE · 发表于 2021-9-10 17:33:33

假装有元素和类进行对其的装饰

laure · 发表于 2022-1-22 09:37:10

c2514710281 · 发表于 2022-10-25 14:09:03

看看

小坛砸 · 发表于 2024-4-17 16:11:30

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 039 - 初学CSS的噩梦（VI）

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: