如何通过js使用:nth-child()或者类型功能 示例

示例1：使用:nth-child()选择器

HTML代码：

<ul>
  <li>第一个</li>
  <li class="selected">第二个</li>
  <li>第三个</li>
  <li class="selected">第四个</li>
  <li>第五个</li>
</ul>

CSS代码：

li:nth-child(2) {
  color: red;
}
li:nth-child(odd) {
  background-color: lightgray;
}
li.selected:nth-child(even) {
  background-color: yellow;
}

JS代码：

// 使用querySelectorAll选择所有li元素
const listItems = document.querySelectorAll("li");

// 设置第二个li元素的文本颜色为红色
listItems[1].style.color = "red";

// 设置奇数个li元素的背景颜色为浅灰色
for (let i = 0; i < listItems.length; i++) {
  if (i % 2 === 0) {
    listItems[i].style.backgroundColor = "lightgray";
  }
}

// 设置偶数个被选中的li元素的背景颜色为黄色
const selectedItems = document.querySelectorAll("li.selected");
for (let i = 0; i < selectedItems.length; i++) {
  if (i % 2 !== 0) {
    selectedItems[i].style.backgroundColor = "yellow";
  }
}

示例2：使用类型选择器

HTML代码：

<div>
  <p>第一个段落</p>
  <p class="selected">第二个段落</p>
  <span>第一个span元素</span>
  <span class="selected">第二个span元素</span>
  <p>第三个段落</p>
</div>

CSS代码：

p {
  font-size: 16px;
}
.selected {
  color: blue;
}
span.selected {
  font-weight: bold;
}

JS代码：

// 使用querySelectorAll选择所有p和span元素
const elements = document.querySelectorAll("p, span");

// 设置所有p元素的字体大小为16px
for (let i = 0; i < elements.length; i++) {
  if (elements[i].nodeName === "P") {
    elements[i].style.fontSize = "16px";
  }
}

// 设置所有被选中的元素的颜色为蓝色
const selectedElements = document.querySelectorAll(".selected");
for (let i = 0; i < selectedElements.length; i++) {
  selectedElements[i].style.color = "blue";
}

// 设置所有被选中的span元素的字体加粗
const selectedSpans = document.querySelectorAll("span.selected");
for (let i = 0; i < selectedSpans.length; i++) {
  selectedSpans[i].style.fontWeight = "bold";
}