CSS nth-child 仅适用于 n=1答案

【问题标题】：CSS nth-child only applies for n=1CSS nth-child 仅适用于 n=1
【发布时间】：2015-07-16 10:14:54
【问题描述】：

我正在尝试设置 #past 的子项的样式，以使最近的子项完全不透明，而继续执行的子项则逐渐变为透明。只有第一条规则（对于 nth-child(1)）被应用（以及所有个孩子）。

CSS：

#past:nth-child(1){opacity:0.55;}
#past:nth-child(2){opacity:0.60;}
#past:nth-child(3){opacity:0.65;}
#past:nth-child(4){opacity:0.70;}
#past:nth-child(5){opacity:0.75;}
#past:nth-child(6){opacity:0.80;}
#past:nth-child(7){opacity:0.85;}
#past:nth-child(8){opacity:0.90;}
#past:nth-child(9){opacity:0.95;}
#past:nth-child(10){opacity:1.00;}

HTML：

<div id="past">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

https://jsfiddle.net/Lrngytjj/

我在这里做错了什么？

【问题讨论】：

如果所有答案都不起作用或者您仍然遇到问题，请告诉我，以便我提供帮助

标签： html css css-selectors

【解决方案1】：

指定容器不起作用。需要指定子类型

#past div:nth-child(1){opacity:0.55;}
#past div:nth-child(2){opacity:0.60;}
#past div:nth-child(3){opacity:0.65;}
#past div:nth-child(4){opacity:0.70;}
#past div:nth-child(5){opacity:0.75;}
#past div:nth-child(6){opacity:0.80;}
#past div:nth-child(7){opacity:0.85;}
#past div:nth-child(8){opacity:0.90;}
#past div:nth-child(9){opacity:0.95;}
#past div:nth-child(10){opacity:1.00;}

<div id="past">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

【讨论】：

似乎是投反对票的报复。我认为没有理由对此投票。
@ManojKumar，这就是我的想法！太小气了！

【解决方案2】：

当您说 #past:nth=child(1) 时，您是在说首先存在 #past 并应用 css 不透明度。您需要在#past 中定位divs 以获得您想要的效果。

https://jsfiddle.net/Lrngytjj/2/

#past div:nth-child(1) {opacity:0.55;}
#past div:nth-child(2) {opacity:0.60;}
#past div:nth-child(3) {opacity:0.65;}
#past div:nth-child(4) {opacity:0.70;}
#past div:nth-child(5) {opacity:0.75;}
#past div:nth-child(6) {opacity:0.80;}
#past div:nth-child(7) {opacity:0.85;}
#past div:nth-child(8) {opacity:0.90;}
#past div:nth-child(9) {opacity:0.95;}
#past div:nth-child(10){opacity:1.00;}

【讨论】：

【解决方案3】：

nth-child 将寻找父元素以确定它应该影响元素的数量。

在您的代码中，#past 的父级是body，因此它以其中的所有元素为目标以具有不透明度。相反，您应该定位子元素 div。

#past div:nth-child(1) {
  opacity: 0.55;
}
#past div:nth-child(2) {
  opacity: 0.60;
}
#past div:nth-child(3) {
  opacity: 0.65;
}
#past div:nth-child(4) {
  opacity: 0.70;
}
#past div:nth-child(5) {
  opacity: 0.75;
}
#past div:nth-child(6) {
  opacity: 0.80;
}
#past div:nth-child(7) {
  opacity: 0.85;
}
#past div:nth-child(8) {
  opacity: 0.90;
}
#past div:nth-child(9) {
  opacity: 0.95;
}
#past div:nth-child(10) {
  opacity: 1.00;
}

<div id="past">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

【讨论】：

是的，报复你的评论:)