有空间和无空间的伪类的不同行为 [英] Different behavior for pseudo-class with space and without space
本文介绍了有空间和无空间的伪类的不同行为的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
此问题与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.
- 鉴于我有以下简单的HTML:
<body>
<p>Paragraph1</p>
<p>Paragraph2</p>
</body>
- 我添加以下CSS:
body:last-child{
color:red;
}
<body>
<p>Paragraph1</p>
<p>Paragraph2</p>
</body>
没有空格,两个段落都将标记为红色
- 当我在.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屋!
查看全文