Question

我正在学习HTML和CSS，并且对nth-of-type的工作方式感到困惑吗？在谷歌搜索时，我知道它选择了指定类型的第n个元素。在下面的代码中，我想为所有第一段设置样式，但只有上面两个段落被设置样式。

<!DOCTYPE html>
<html>
<head>
    <title>selector</title>
    <style type="text/css">         
        p:nth-of-type(1){
            color: blue;
        }
    </style>

</head>
<body>
<h1>this is heading 1</h1>
<p>this is a paragraph 1</p>  //--> this is working

<div>
    <h2>this is heading 2</h2>
    <h2>this is the heading 3</h2>
    <p>this is paragraph 2</p>     //-->this is also working
</div>

<h3>this is heading 4
    <h4>this is heading 5</h4>
    <p>This is paragraph 3</p>     //-->Not working
</h3>


</body>
</html>

Answer 1

我不认为您应该将元素放在这样的标头标签中，如果标签与其他标签是另一种类型。

Answer 2

p:nth-of-type(1) {
  color: blue;
}

<!DOCTYPE html>
<html>
  <head>
    <title>selector</title>
  </head>
  <body>
    <h1>this is heading 1</h1>
    <p>this is a paragraph 1</p><!-- this is working -->
    <div>
      <h2>this is heading 2</h2>
      <h2>this is the heading 3</h2>
      <p>this is paragraph 2</p><!--this is also working -->
    </div>
    <div>
      <h3>this is heading 4</h3>
      <h4>this is heading 5</h4>
      <p>This is paragraph 3</p> <!--working now-->
    </div>
  </body>
</html>

为什么以下HTML代码中的最后一段没有显示颜色？

2 个答案: