关于div:first-child
<style>
div:first-child {
color: red;
}
</style>
<body>
<div class="parent"> // first-child
<div>aa</div>
<div>bb</div>
<div>cc</div>
<div>dd</div>
</div>
</body>
运行结果如下
first.png
我们发现字体全部都变成了红色。好像和我们预期想的有点不一样。来分析下，首先看最外面的class为parent的这个div元素，它的父元素body。我们知道
div:first-child。能够匹配的话要满足两个条件。第一是div标签，第二是其div的父元素的第一个子元素。也可以换句话就是，我们先找到div标签，再看它是否是第一个子元素。因为一个元素一般都是有父元素的。都是写在<html></html>的内部嘛。此时我们就查看它是不是第一个子元素了。的确是第一个子元素。于是aa,bb,cc,dd的字体都为红色。里面的div标签就不需要看了。
<style>
div:first-child {
color: red;
}
</style>
<body>
<div class="parent"> // first-child
<p>aa</p>
<p>bb</p>
<p>cc</p>
<p>dd</p>
</div>
</body>
first.png
为什么不用看，看这个效果就知道了。和上面的效果一样。
变化一下。
<style>
div:first-child {
color: red;
}
</style>
<body>
<h1>hello world</h1> // first-child
<div class="parent">
<div>aa</div>
<div>bb</div>
<div>cc</div>
<div>dd</div>
</div>
</body>
添加了h1标题。此刻效果如下。
添加h1标题.png
都没有颜色了。因为此时body的第一子元素，已经不是div标签了。不满足条件。
第二种情况 div:first-of-type
<style>
div:first-of-type {
color: red;
}
</style>
<body>
<h1>hellow world</h1>
<div class="parent">
<div>aa</div>
<p>bb</p>
<p>cc</p>
<p>dd</p>
</div>
<div>ee</div>
</body>
运行效果如下。
second.png
如果要匹配的话，必须满足两个条件：第一是div标签，第二是第一个div标签。这也就是为什么h1标题和最后一个div里面字不变的原因。
.parent div:first-child
<style>
.parent div:first-child {
color: red;
}
</style>
<body>
<div class="parent">
<h1>hellow</h1>
<div class="aa">aa
<div>ee</div>
</div>
<p>bb</p>
<p>cc</p>
<p>dd</p>
</div>
</body>
我们先找到class为parent下的所有div标签，首先我们看第一个内容为aa的div标签，它的父元素即，class为parent，其firs child是h1标题。因而没有效果。我们再看内容为ee的div标签，它的父元素是class为aa的div元素。其下面的第一个子元素，正好也是div元素。因此ee显示颜色。不要被.parent误导，认为ee也没有颜色。
.parent div:fist-of-type
<style>
.parent div:first-of-type {
color: red;
}
</style>
<body>
<div class="parent">
<h1>Hellow world</h1>
<div class="aa">aa
<h1>hi</h1>
<div>ee</div>
<div>ff</div>
</div>
<p>bb</p>
<p>cc</p>
<p>dd</p>
<div>gg</div>
</div>
</body>
first-of-type.png
一步一步分析。首先在class为parent的元素下，找div标签。找到class为aa的div元素。它的父元素即即parent。在其内部，我们看它是不是第一个div标签。通过观察发现的确是。因此class为aa的内部所有内容都显示为红色。我们再看发现class为aa的内部还有div标签，这个时候就可以不用管它了。class为parent的最后一个内容为gg的div标签，很遗憾它不是第一个。所以不显示颜色。
关于div :first-child （有空格的）
<style>
div :first-child {
color: red;
}
</head>
<body>
<div class="parent">
<p>aa</p> /* first-child */
<div class="bb">bb
<h1>cc</h1> /* first-child */
</div>
</div>
</body>
空格-first-child.png
首先我们找div标签,class为parent的div标签。我们关注它内部的第一子元素，这个时候就不需要要求它
同时div标签了。内容为aa的p标签匹配。再往下找。我们发现还有class为bb的div标签。其内部的第一子元素即<h1>cc</h1>,因此cc显示为红色。
关于div :first-of-type（有空格的）
<style>
div :first-of-type {
color: red;
}
</style>
<body>
<div class="parent">
<p>aa</p>
<div>bb</div>
<div class="cc">cc
<h1>dd</h1>
<p>ee</p>
</div>
</div>
</body>
空格-first-of-type.png
分析 先找div标签。class为parent的div标签，我们可以发现其内部有两种标签，即p标签和div标签，然后分别
找它们的第一个就好了。另外一个是class为cc的div标签。其内部有h1标签和p标签，同样分别找到第一个就好了。
总结：element :first-child 和 element :first-of-type 前者只要在element下找第一子元素，后者只要找同种类型中的第一个元素。而无关乎element，这是和不加空格的区别。
网友评论