您的位置：首页 > Web前端 > CSS

关于CSS伪类first-child的深入理解

2017-07-21 23:43 811 查看

关于CSS伪类first-child的深入理解

在CSS（CSS3）中，有一种选择器很特殊，那就是伪类，关于伪类有很多，这里详细分析其中的一种：first-child。

具体书写格式如下：

element：first-child{（CSS语句）}

关于这个伪类，可能很多人都会对它有一个误解，那就是字面上的误解：以为是element的第一个子元素，其实这种理解是完全错误的，首先我们来看下面的代码：

代码1.

<style type="text/css">
p:first-child{
background-color: red;
}
</style>
<body>
<p>测试段落1</p>
<p>测试段落2</p>
<p>测试段落3</p>
</body>

估计很多人能知道显示结果，它的显示结果如下：

再看下面的一个代码：

代码2.

<style type="text/css">
p:first-child{
background-color: red;
}
</style>
<body>
<p>测试段落1</p>
<p>测试段落2</p>
<p>测试段落3</p>
<div>
<p>测试段落5</p>
<p>测试段落6</p>
<p>测试段落7</p>
</div>
</body>

这个显示结果或许会让你有点疑惑，但是它的显示结果如下：

或许以上两个例子大家能明白，那么再看这一段代码：

代码3.

<style type="text/css">
p:first-child{
background-color: red;
}
</style>
<body>
<p>测试段落1
<p>测试段落2</p>
<p>测试段落3</p>
<div>
<p>测试段落5</p>
<p>测试段落6</p>
<p>测试段落7</p>
</div>
</p>
</body>

这个估计很多人要骂人了，怎么会是这个结果？它的显示效果如下：

和上面的代码显示效果一样，估计经过这三段代码，很多人都已经不觉得自己理解这个伪类了，那么下面我们就具体分析一下为什么是这样的显示，大家在看完分析后，估计就能明白上面的代码为什么会显示成那样了。

1.首先要明白HTML中的文档结构关系——父子关系，指的是一个元素的直接上级元素是它的父元素，直接下级元素是它的子元素。

2.这个伪类中有child这个词，意思是子（儿子），那么说到子，必然存在父，要想明白为什么上述代码会出现匪夷所思的现象，首先要明白这个父到底是谁？

3.很显然，这个父元素不是上面格式中说的element，实际上这个element是子，后面的first-child可以看做是这个子的一个定语（描述），具体是哪个儿子呢？第一个儿子。

4.对于这个伪类，它的父就是该element子元素的直接上级元素，那么对于p：first-child的正确理解是（假设p的父元素是x）：x的第一个叫做p的儿子。

现在我们再重新分析上述代码：

代码1.

<style type="text/css">
p:first-child{
background-color: red;
}
</style>
<body>
<p>测试段落1</p>
<p>测试段落2</p>
<p>测试段落3</p>
</body>

很显然，这里的p的父元素是body，那么CSS中的意思就是：body的第一个叫做p的儿子的背景色是红色，那不就是“测试段落1”么，所以它的背景色显示为红色。

代码2.

<style type="text/css">
p:first-child{
background-color: red;
}
</style>
<body>
<p>测试段落1</p>
af60
<p>测试段落2</p>
<p>测试段落3</p>
<div>
<p>测试段落5</p>
<p>测试段落6</p>
<p>测试段落7</p>
</div>
</body>

这里的p元素有两个父亲，一个是body，一个是div，那么CSS中的意思就是：body的第一个叫做p的儿子的背景色是红色，div的第一个叫做p的儿子的背景色是红色，那不就是“测试段落1”和“测试段落5”么，所以它们两的背景色都是红色。

代码3.

<style type="text/css">
p:first-child{
background-color: red;
}
</style>
<body>
<p>测试段落1
<p>测试段落2</p>
<p>测试段落3</p>
<div>
<p>测试段落5</p>
<p>测试段落6</p>
<p>测试段落7</p>
</div>
</p>
</body>

这里的p元素有这样几个父亲：body，p，div，那么CSS中的意思就是：body的第一个叫做p的儿子的背景色是红色，p的第一个叫做p的儿子的背景色是红色，div的第一个叫做p的儿子的背景色是红色，按理说应该是“测试段落1”“测试段落2”和“测试段落5”三个段落的背景色是红色啊，为什么结果是“测试段落1”和“测试段落5”的背景色是红色呢？

注意：生活中我们都知道，父亲是不可能和儿子一个名字的，所以这里也不可能发生，就被除去了，也就是p的第一个叫做p的儿子不合理，所以它没变化。

好，看来大家应该能明白了吧，这里给大家看看下面一段代码的显示结果是什么：

<style type="text/css">
li:first-child{
background-color: red;
}
</style>
<body>
<ul>
<li>列表项0</li>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<ul>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</ol>
<li>列表项5</li>
<li>列表项6</li>
</ul>
</body>

答案：列表项0，列表项1和列表项3的背景色是红色，显示结果如下：

本案例测试结果基于chrome浏览器，纯属个人理解，如若意见相左，希望积极反馈，相互交流。

世界上任何复杂的事物都是由简单的东西一一拼凑而成，所谓的大牛，无非就是对于简单的东西比你熟练百倍而已。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css css3

相关文章推荐

新的分享

章节导航