《二十四节气歌》之五《节气百子歌》

图片 1

《二十四节气歌》之五《节气百子歌》

说个子来道个子, 正月过年耍狮子。二月惊蛰抱蚕子,
三月清明坟飘子。四月立夏插秧子, 五月端阳吃粽子。六月天热买扇子,
七月立秋烧袱子。八月过节麻饼子, 九月重阳捞糟子。十月天寒穿袄子,
冬月数九烘笼子。腊月年关四处去躲帐主子。

定义

逼自己说几句


这篇文章是从我上一个简书账号里粘贴过来的,当时第一次学CSS选择器,记得很清楚,对于first-childfitst-of-type确实比较懵,于是整理了他们俩的区别。

记得当时总结出来的时候有一种茅塞顿开的感觉。

所以还是说,自学,还是需要不断去写技术性博客,真的很有用。

  • :first-child
    选择器用于选取属于其父元素的首个子元素的指定选择器。
  • first-of-type
    选择器匹配属于其父元素的特定类型的首个子元素的每个元素。

两者的定义


  • :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
  • :first-of-type
    选择器匹配属于其父元素的特定类型的首个子元素的每个元素。

定义的解析

定义的解析


  • :first-child 当出现 p:first-child
    时,其所匹配的元素必须符合以下两点:1.必须为p标签;2.必须为某个父元素的第一个子元素

  • :first-of-type 当出现 p:first-of-type
    时,其所匹配的元素为所有子元素中的第一个p标签(不论该p标签是否为第一个子元素)

  • :first-child
    当出现 p:first-child
    时,其所匹配的元素必须符合以下两点:1.必须为p标签;2.必须为某个父元素的第一个子元素

  • :first-of-type
    当出现 p:first-of-type
    时,其所匹配的元素为所有子元素中的第一个p标签(不论该p标签是否为第一个子元素)

定义的深度解析


一个父元素会包括一个或多个子元素

<div class="parent">
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

在这些子元素中,只有一个是排名第一的,这就是:first-child

<div class="parent">
  <div>Child</div>/*first-child*/
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

first-of-typefirst-child
的区别在于它匹配的是该元素类型的第一个子元素,可能这个元素并不是该父元素的第一个子元素

如果 XXX:first-child 存在,任何的 XXX:first-child 肯定是
XXX:first-of-type

div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

如果把上面的代码的子元素的第一个 div 给换掉,比如换成 h1 ,那么这个
h1 仍然是其父元素的第一个子元素,但是已经不是第一个 div 了。第二行的
div 是其父元素的第二个子元素,而且是第一个 div
。具体的注释请看如下的代码:

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

同时, first-child 在任何情况下都只能匹配到一个元素,而
first-of-type 在一些情况下能匹配到不止一个元素,如下代码:

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

定义的深度解析

实例运用


代码地址

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>first-child对比first-of-type</title>
<style>
.parent :first-child{
  color: red;
}
.parent :first-of-type{
  background: yellow;
}
.parent div:first-child{
  font-size: 50px;
}
.parent div:nth-child(3){
  text-decoration: line-through;
}
.parent div:first-of-type{
  border: 1px green solid;
}
.parent p:first-child{
  text-decoration: underline;
}
</style>
</head>
<body>
<div class="parent">
  <p>child1</p>
    <div>child2</div>
    <div>child3</div>
    <div>child4</div>
  </div>
</body>
</html>

运行结果:

图片 1

详细分析以上代码得出:

.parent :first-child{
  color: red;
}

以上代码匹配parent这个父元素的首个子元素,所以child1变成了红色

.parent :first-of-type{
  background: yellow;
}

以上代码匹配parent这个父元素的所有标签的首个子元素,其中parent的第一个子元素是p,同时也是第一个p,parent的第二个子元素是div,同时也是第一个div,所以child1和child2的背景颜色变成了黄色

.parent div:first-child{
  font-size: 50px;
}

以上代码匹配parent这个父元素的首个子元素,并且这个首个子元素必须为div,然而parent这个父元素的首个子元素为p,所以没有任何的元素被匹配上

.parent div:nth-child(3){
  text-decoration: line-through;
}

以上代码匹配parent这个父元素的第三个子元素,并且这个子元素为div,所以child3有删除线的效果

.parent div:first-of-type{
  border: 1px green solid;
}

以上代码匹配parent这个父元素的第一个div子元素,所以child2有实现框的效果

.parent p:first-child{
  text-decoration: underline;
}

以上代码匹配parent这个父元素的第一个子元素,并且这个子元素为p,所以child1有下划线的效果


参考文章:

  • Stack Overflow:
    what-is-the-difference-between-first-child-and-first-of-type

(完)

文档信息

  • 自由转载-非商用-非衍生-保持署名
  • 发表日期:2016年9月8日

一个父元素会包括一个或多个子元素

<div class="parent">
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

在这些子元素中,只有一个是排名第一的,这就是:first-child

<div class="parent">
  <div>Child</div>/*first-child*/
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

first-of-typefirst-child
的区别在于它匹配的是该元素类型的第一个子元素,可能这个元素并不是该父元素的第一个子元素

如果 XXX:first-child 存在,任何的 XXX:first-child 肯定是
XXX:first-of-type

div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

如果把上面的代码的子元素的第一个 div 给换掉,比如换成 h1 ,那么这个
h1 仍然是其父元素的第一个子元素,但是已经不是第一个 div 了。第二行的
div 是其父元素的第二个子元素,而且是第一个 div
。具体的注释请看如下的代码:

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>
admin

网站地图xml地图