Question

有没有人知道为什么以下代码为标记<h1>设置样式我不明白为什么会发生这种情况，我之前从未为标记<head>设置样式。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
              :root {
            background: green;
        }

            :root :nth-child(1) {
                text-decoration: underline;
                color:white;
            }

    </style>
</head>
<body>
    <h1>Header</h1>
    <h2>Header</h2>
</body>
</html>

Answer 1

它之所以有用，是因为您设置了:first-child元素中包含的所有第一个孩子（:nth-child(1) / :root）元素（所有元素都在:root内元素）有这种风格。

我以前从未为标签“head”设置样式。

你还没有，你只是在<style /> 中包含或放置了<head>元素。

Answer 2

:nth-child(1)匹配其父级的所有第一个子元素，这些元素是:root元素¹的后代。因此，无论您是否使用过:root，都会选择<h1>中的第一个标题<body>元素。

考虑到给定的标记，<head>和<h1>将成为:nth-child(1)或:root :nth-child(1)选择者的主题，因为他们是父母的第一个孩子，{{ 1}}和<html>

^{1。在HTML中，根元素是<body>}

怎么做：root：nth-child（1）定位第一个标题

2 个答案:

怎么做：root：nth-​​child（1）定位第一个标题

2 个答案:

怎么做：root：nth-child（1）定位第一个标题