Question

<!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>

为什么只有“非常”呈红色，而“令人难以置信”不是因为它们都是“div.weather strong”指定元素的第一个孩子？

Answer 1

因为伪造选择器没有按照你的想法做到。

在您所陈述的示例中，它选择元素.weather的第一个子元素<strong>元素。

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

<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例子，我知道，但这就是我对它的看法。

Answer 2

我认为你的意思是

div.weather > strong {color:red;}

这将仅选择儿童（第一级嵌套）而不是所有后代。

Answer 3

first-child表示“作为第一个孩子的元素”，而不是“此元素的第一个孩子。”

因此，您的示例意味着“strong的第一个孩子div.weather。”

如果你想让div中的所有<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 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>

Answer 4

div.weather strong：第一个孩子说选择第一个强大的元素是天气的孩子，而不是天气的所有子元素。它只会匹配一个元素。

div.weather强烈匹配作为天气后代的所有强大元素。 div.weather＆gt;强烈匹配所有直接的天气儿童的强大元素。 div.weather *强烈匹配所有孙子或以后的强大元素。

答案 4 :(得分：0)

我认为你对“第一胎”的理解是错误的。第一个孩子只是第一个元素。请参阅example at W3Schools。

答案 5 :(得分：0)

strong个元素都是div的子元素，但只有第一个元素是第一个strong子元素。所以你只是误解了选择器。

Answer 5

我认为你对“第一胎”的理解是错误的。第一个孩子只是第一个元素。请参阅example at W3Schools。

Answer 6

strong个元素都是div的子元素，但只有第一个元素是第一个strong子元素。所以你只是误解了选择器。

css伪类

6 个答案: