马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-2-14 15:33 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
本讲开始介绍结构伪类。
结构是指页面的结构，我们根据某些特性，来对指定元素的样式进行修改。
重点就是后面 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>
如果这几个选择器前面不指定元素，那么父元素默认为 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;
}
:first-of-tpye，找到相同类型中的第一个。
修改样式：
p:first-of-type {
color: aqua;
}
:last-of-tpye，找到相同类型中的最后一个，同理不演示啦。
第二个 div 中的唯一子元素 p 既可以作为 first-of-type，也可以作为 last-of-type 。
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-2-4 09:53:28
置顶卡
千斤顶
显身卡
发表于 2020-2-13 22:28:15
