css伪类

Question

css伪类

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Dav*_*mas 6

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

它选择,在您所陈述的示例中,元素的第一个孩子.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

Run Code Online (Sandbox Code Playgroud)

我知道,这不是最漂亮的ascii例子,但它是我如何看待它的.

归档时间：	16 年，5 月前
查看次数：	3009 次
最近记录：	16 年，5 月前