[分享]css另一个li不受影响

CSS中，当我们修改一个li元素的样式时，如果不特殊处理，其它的li元素也会受到影响。因此，我们需要想办法让另一个li不受到影响。ul li { color: 000; backgroundcolor...

CSS中，当我们修改一个li元素的样式时，如果不特殊处理，其它的li元素也会受到影响。因此，我们需要想办法让另一个li不受到影响。

ul li {
  color: #000;
  background-color: #ccc;
}
ul li:hover {
  background-color: #f00;
}
ul li:first-child {
  background-color: #0f0;
}
ul li:last-child {
  background-color: #00f;
} 

上面的代码中，我们为所有的li元素设置了颜色和背景颜色，并为鼠标悬停在li元素上时设置了背景颜色。另外，我们也为第一个和最后一个li元素设置了不同的背景颜色。

但是，如果我们希望只对第二个li元素进行特殊处理呢？我们可以使用伪类选择器nth-child(n)来选取第n个子元素。

ul li:nth-child(2) {
  background-color: #ff0;
} 

上面代码中，我们使用了nth-child(2)，表示选取该ul元素下的第二个li元素，并将其背景颜色设置为黄色。

这样，我们就成功地让另一个li不受到影响了。