如何在HTML中指定属于同一类的元素？

Question

如何指定每个

p

标签的第一个

li

元素属于同一类，而无需手动执行（如果

li

元素中有太多

ul

标签），我们知道

:first-child

伪类仅对元素应用

style

属性，而不是

class

属性？

<ul>
  <li>
    <p>...</p>
    <p>...</p>
  </li>
  <li>
    <p>...</p>
    <p>...</p>
  </li>
</ul>

Answer 1

您可以在 CSS 中使用

li > p:first-child

作为选择器：

li > p:first-child {
  background-color: red;
}

<ul>
  <li>
    <p>...</p>
    <p>...</p>
  </li>
  <li>
    <p>...</p>
    <p>...</p>
  </li>
</ul>

如果您确实想向这些元素添加类，那么您可以使用 JavaScript 和

classList.add()

函数：

const FirstParagraph = document.querySelectorAll('li > p:first-child');
FirstParagraph.forEach(paragraph => {
  paragraph.classList.add('bg-red');
})

.bg-red {
  background-color: red;
}

<ul>
  <li>
    <p>...</p>
    <p>...</p>
  </li>
  <li>
    <p>...</p>
    <p>...</p>
  </li>
</ul>