有空间和无空间的伪类的不同行为 [英] Different behavior for pseudo-class with space and without space

查看:53
本文介绍了有空间和无空间的伪类的不同行为的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

此问题与CSS伪类有关.我仅以:last-child为例,我想它也发生在所有其他伪类中.

This issue is related to CSS pseudo-class. I refer to :last-child just for example, I suppose it happens to all other pseudo-class too.

  1. 鉴于我有以下简单的HTML:

<body>
    <p>Paragraph1</p>
    <p>Paragraph2</p>
</body>

  1. 我添加以下CSS:

body:last-child{
	color:red;
}

<body>
	<p>Paragraph1</p>
	<p>Paragraph2</p>
</body>

没有空格,两个段落都将标记为红色

  1. 当我在.body和:last-child之间设置空格时,只有第二段会被标记为红色-在Google Chrome中会发生这种情况,我发现代码段工具不会将任何段落标记为红色.

body: last-child{
	color:red;
}

<body>
	<p>Paragraph1</p>
	<p>Paragraph2</p>
</body>

问题:有人可以帮助我理解为什么会这样吗?也许有什么要更多地了解伪类在有空间和无空间的情况下的行为?

Question: Could anyone help me understand why this happens? Maybe anything to read more on behaviour with space and without space for pseudo-class?

推荐答案

这是最后一段而不是最后一个正文.

It's last paragraph not last body.

因此,只需执行以下操作:

So, just do this:

body p:last-child{
   color: red;
}

空格分隔下一级元素,以使CSS选择器正常工作.

Space separates the next level of elements for css selector to work.

这篇关于有空间和无空间的伪类的不同行为的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆