关于自己在学习div p:first-child的一点笔记

75 阅读 0 评论 50 点赞

我是靠谱客的博主跳跃牛排，最近开发中收集的这篇文章主要介绍关于自己在学习div p:first-child的一点笔记，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

div p:first-child

自己在网上看了视频，发现好多讲的都是错的，果然这个东西还是要自己尝试这打一遍代码才能真正明白这个是什么意思。
首先这是我自己举例子时候用的测试代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 选择div的所有后代p */
/* div p{
background-color: #FFC0CB;
} */
/* 选择与div标签紧邻的下一个同级p元素，如果中间被其他元素隔开则不会选中 */
/* div+p{
background-color: #008000;
} */
/* 选择div的子元素p，第一级子元素p */
/* div>p{
background-color: #FFC0CB;
} */
/* 选择div后面同级的所有p标签，被其他元素隔开也会选中 */
/* div~p{
background-color: #008000;
} */
/* 选择div中，所有第一个子元素是p的元素中的第一个子p */
div p:first-child{
background-color: #FFC0CB ;
}
</style>
<!-- 文件自上而下加载，谁写在后面就是谁 -->
<!-- <link rel="stylesheet" type="text/css" href="css/div.css" /> -->
</head>
<body>
<p>11112222333</p>
<div>
<p>
p1
</p>
<span>
<div></div>
<p>
span1
</p>
</span>
<span>
<p>2234</p>
<a href="#"> 111</a>
<p>span2</p>
</span>
</div>
</body>
</html>

首先我运用今天的主人公选择器选择，将div p:first-child选择的元素设置为猛男色，经过多次尝试，总结出结论

div p:first-child：从div中的所有后代p中选择，如果p是其父元素的第一个子元素，则选择该p元素
这么说可能有点拗口，解释一下
div p的意思是选择所有div的后代元素p，所以刚才那句话的第一部分很好理解
然后，我认为这个：first-child的作用是从前面那个条件中，在规定筛选条件
比如：

<div>
<p>
p1
</p>
<span>
<div></div>
<p>
span1
</p>
</span>
<span>
<p>2234</p>
<a href="#"> 111</a>
<p>span2</p>
</span>
</div>

这段代码中 p1内容被修改为粉色了，没问题，他是div的后代p元素，而且他的父元素div的第一个子元素也是他，所以他被选中了
然后看第二部分 span 标签，其中p标签内容span1没有被选中，为什么呢，
首先这个p标签满足，div中的所有后代p这一条件，但是这个p元素不是他父元素span的第一个子元素，所以没有被选中
反之，我们看第二个span标签中的内容 2234这段文本的颜色成功修改了，这个p标签满足
1.div中的所有后代p
2.该p元素是其父元素span元素的第一个子元素
所以他被选中了。

以上是我个人学习这个选择器时候的一点笔记，完全是个人总结，我也不是大佬如果有说错的地方欢迎纠正