html:first-of-child浏览器是怎么解读的？
运行以下代码发现网页全红是怎么回事？<!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> html标签中的第一个子元素就是这整个html页面,包含了整个显示区域,自然是全红. 542624047 发表于 2020-3-28 15:46
html标签中的第一个子元素就是这整个html页面,包含了整个显示区域,自然是全红.
第一个子元素为什么不是head呢 皙冉 发表于 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。
页:
[1]