038 - 初学CSS的噩梦（V）

不二如是 · 发表于 2020-2-4 09:53:28

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

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

x

本帖最后由不二如是于 2020-2-14 15:33 编辑

上一集： 037 - 初学CSS的噩梦（IV）

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

在线视频：传送门

课程思维导图

猛戳

登录/注册后可看大图

超清

本讲开始介绍结构伪类。

结构是指页面的结构，我们根据某些特性，来对指定元素的样式进行修改。

重点就是后面 6 个选择器。

基础 html 结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<style>
</style>
</head>
<body>
<p>这个段落是其父元素（body）的首个子元素。</p>
<h1>h1标题</h1>
<p>这个段落不是body的首个子元素。</p>
<div>
<p>我是div(父元素)的第1(首)</p>
<p>我不是div的首个子元素,我是第2个。</p>
<p>我是div中第3个</p>
<p>我是div中第4个</p>
<p>我是div中最后一个</p>
</div>
</body>
</html>

复制代码

后续我们的样式都在 style 中加。

如果这几个选择器前面不指定元素，那么父元素默认为 body，那么就都会被选中！

直接 :first-child：

:first-child {
color: aqua;
}

复制代码

没有实际意义！

修改为：

p:first-child {
color: aqua;
}

复制代码

为页面中作为第一个子元素的 p 设置样式。

:last-child 也是同理，不演示了。

修改样式为：

p:only-child {
color: aqua;
}

复制代码

页面没有变化...

这是因为

在第一个 div 下添加：

<div>
<p>第二个div的唯一子元素p</p>
</div>

复制代码

现在刷新样式：

:only-child，只能匹配某父元素下的唯一，一个子元素，就像新加的 div 结构一样。

:only-of-type，是匹配父元素下唯一类型的子元素。

修改新加的 div：

<div>
<h1>第二个div的第一个h1</h1>
<h1>第二个div的第二个h1</h1>
<p>第二个div的唯一子元素p</p>
</div>

复制代码

修改样式为：

h1:only-of-type {
color: aqua;
}

复制代码

找到页面中唯一类型的 h1 元素：

:first-of-tpye，找到相同类型中的第一个。

修改样式：

p:first-of-type {
color: aqua;
}

复制代码

找到所有相同 p 元素中的第一个：

:last-of-tpye，找到相同类型中的最后一个，同理不演示啦。

第二个 div 中的唯一子元素 p 既可以作为 first-of-type，也可以作为 last-of-type 。

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：039 - 初学CSS的噩梦（VI）

如果有收获，别忘了评分

：

登录/注册后可看大图

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

）

LuckyTiger66 · 发表于 2020-2-13 22:28:15

坐沙發等更新

小脑斧 · 发表于 2020-3-9 17:37:48

作业去哪了？

QBR · 发表于 2024-11-23 14:32:45

学习了

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

[学习笔记] 038 - 初学CSS的噩梦（V）

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

评分

本帖被以下淘专辑推荐:

浏览过的版块