038 - 初学CSS的噩梦（V）
本帖最后由 不二如是 于 2020-2-14 15:33 编辑上一集： 037 - 初学CSS的噩梦（IV）
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
本讲开始介绍结构伪类。
结构是指页面的结构，我们根据某些特性，来对指定元素的样式进行修改。
重点就是后面 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 。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：039 - 初学CSS的噩梦（VI）
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ） 坐沙發等更新{:10_279:} 作业去哪了？
页:
[1]