[已解决]html:first-of-child浏览器是怎么解读的？

皙冉 · 发表于 2020-3-28 13:00:18

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

运行以下代码发现网页全红是怎么回事？
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
      html:first-child {
         background-color: red;
      }
</style>
</head>

<body>
<p>一</p>
<p>二</p>
<div>三</div>
<p>四</p>
</body>

</html>

最佳答案

月排行榜 / 总排行榜

542624047

2020-3-28 15:46:24

html标签中的第一个子元素就是这整个html页面,包含了整个显示区域,自然是全红.

跳转到最佳答案楼层

542624047 · 发表于 2020-3-28 15:46:24

这个最佳答案由 542624047 给出，感谢 542624047 的回答。

单击隐藏图章

html标签中的第一个子元素就是这整个html页面,包含了整个显示区域,自然是全红.

皙冉 · 发表于 2020-4-22 19:56:45

542624047 发表于 2020-3-28 15:46
html标签中的第一个子元素就是这整个html页面,包含了整个显示区域,自然是全红.

第一个子元素为什么不是head呢

542624047 · 发表于 2020-5-3 18:47:35

皙冉发表于 2020-4-22 19:56
第一个子元素为什么不是head呢

不好意思，可能我之前说的不太清晰。
具体可以看这个属性详情 https://www.w3school.com.cn/cssref/selector_first-child.asp

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

给你举个例子，有div的id="test"，其中有两个p元素我css样式写 #test p:first-child 这个选择器选择的就是其父元素(指id为test的div)的首个p元素，由于html标签在dom结构中是根节点，他其实是没有父元素的，但你可以理解为父元素是整个文档而文档的第一个元素就是html元素。head确实是html的第一个子元素，但是first-child的用法和你想象的还是不一样的，具体是怎么样可以好好在我说的那个网页去体会一下。还有就是head元素是不在页面内容中显示的，你可以在head中指定网页的标题title和标签中显示的图标icon。

账号		自动登录	找回密码
密码			立即注册