如何选择H1标签？

Question

我想定位第一个或最后一个h1标签而不使用CSS第n个选择器;我怎么能这样做？

<div>
  <p> 1st P</p>
  <h1> First H1</h1>
  <h1> Second H1</h1>
  <h1> Third H1</h1>
  <p> 2nd P</p>
</div>

Answer 1

您可以使用:first-of-type和:last-of-type伪类。

＆＃13;

＆＃13;

h1:first-of-type {
  color: rebeccapurple;
}

h1:last-of-type {
  color: gold;
}

＆＃13;

<div>
  <p> 1st P</p>
  <h1> First H1</h1>
  <h1> Second H1</h1>
  <h1> Third H1</h1>
  <p> 2nd P</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用CSS element+element Selector

请记住，element+element选择器用于选择紧跟在第一个指定元素之后（而不是在其中）的元素。

＆＃13;

＆＃13;

div p + h1,
div p + h1 + h1 + h1{
    background-color: yellow;
}

＆＃13;

<div>
  <p> 1st P</p>
  <h1> First H1</h1>
  <h1> Second H1</h1>
  <h1> Third H1</h1>
  <p> 2nd P</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以给你的班级姓名作为你的最后一个标签，你可以转向他

＆＃13;

＆＃13;

<div>
  <p> 1st P</p>
  <h1> First H1</h1>
  <h1> Second H1</h1>
  <h1 class="yourClass"> Third H1</h1>
  <p> 2nd P</p>
</div>

＆＃13;

＆＃13;

＆＃13;