CSS 伪类

发布于 2024-07-26 22:31:38 字数 520 浏览 9 评论 0原文

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>How to Write a Good Report</title>
<style type="text/css">
div.weather strong:first-child {color:red;}
</style>
</head>

<body>

<div class="weather">
It's <strong>very</strong> hot and <strong>incredibly</strong> humid.
</div>

</body> </html>

为什么只有“very”是红色，而“incredible”不是红色，因为它们都是“div.weather Strong”指定的元素的第一个子元素？

原文

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>How to Write a Good Report</title>
<style type="text/css">
div.weather strong:first-child {color:red;}
</style>
</head>

<body>

<div class="weather">
It's <strong>very</strong> hot and <strong>incredibly</strong> humid.
</div>

</body> </html>

Why only "very" is in color red while "incredibly" not since both of them are first child of the element specified by "div.weather strong"?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦巷 2024-08-02 22:31:38

因为伪选择器不会做你认为它会做的事情。

在您所说的示例中，它选择元素 .weather 的第一个子元素，即 元素。

所以只有第一个实例匹配。我无法参考规范来支持这一点，因为我现在很懒（忙碌的一天......），但我脑子里有这样的愿景：

<html>

<div class="weather">

<p><strong>Lorem</strong> ipsum <strong>sit</strong> <em>amet</em> <span><a...>dolor</a><em>yadda yadda yadda</em></span> <a>something</a>, I'm not good at coming up with random text. Sorry...</p>

</html>

                                    Weather
                                       |
+----------------+---------------------+---------------+-------------------+.....
|                |                     |               |                   |
(first-child)  (second-child)      (third-child)      (fourth-child)   (fifth-child)
strong         strong                em                span                a
                                                        |
                                                +-------+--------+
                                                |                |
                                            first-child     second-child
                                                a                em

我知道，这不是最漂亮的 ascii 示例，但是我就是这么想的。

Because the psuedo-selector doesn't do what you think it does.

It selects, in your stated example, the first child of the element .weather that is a <strong> element.

So only the first instance matches. I can't back this up with reference to the spec, since I'm lazy right now (busy day...), but I have this sort of vision in my head:

<html>

<div class="weather">

<p><strong>Lorem</strong> ipsum <strong>sit</strong> <em>amet</em> <span><a...>dolor</a><em>yadda yadda yadda</em></span> <a>something</a>, I'm not good at coming up with random text. Sorry...</p>

</html>

                                    Weather
                                       |
+----------------+---------------------+---------------+-------------------+.....
|                |                     |               |                   |
(first-child)  (second-child)      (third-child)      (fourth-child)   (fifth-child)
strong         strong                em                span                a
                                                        |
                                                +-------+--------+
                                                |                |
                                            first-child     second-child
                                                a                em

It's not the prettiest ascii example, I know, but it's how I think of it.

回复收藏 0 原文

野鹿林 2024-08-02 22:31:38

我认为您的意思是

div.weather > strong {color:red;}

，这将仅选择子代（嵌套的第一层）而不是所有后代。

I think you've meant

div.weather > strong {color:red;}

That will select children only (first level of nesting) rather than all descendants.

回复收藏 0 原文

独自唱情﹋歌 2024-08-02 22:31:38

first-child 表示“第一个子元素”，而不是“该元素的第一个子元素”。

所以你的例子意味着“strong是div.weather的第一个孩子”。

例如，如果您想让 div 中所有 中的第一个单词显示为红色，则需要添加一些标记并执行如下操作：

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>How to Write a Good Report</title>
<style type="text/css">
div.weather strong span:first-child {color:red;}
</style>
</head>

<body>

<div class="weather">
It's <strong><span>very</span> <span>very</span></strong> hot
and <strong><span>really</span> <span>incredibly</span></strong> humid.
</div>

</body> </html>

first-child means "an element that is the first child", not "the first child of this element."

So your example means "the strong that is the first child of div.weather".

If you want to make, say, the first word in all the <strong>s within the div come out red, you'll need to add some markup and do something like this:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>How to Write a Good Report</title>
<style type="text/css">
div.weather strong span:first-child {color:red;}
</style>
</head>

<body>

<div class="weather">
It's <strong><span>very</span> <span>very</span></strong> hot
and <strong><span>really</span> <span>incredibly</span></strong> humid.
</div>

</body> </html>

回复收藏 0 原文