html - CSS nth-child 只适用于 n=1

Question

我正在尝试为#past 的子元素设置样式，使最近的元素完全不透明，而那些继续处理它的元素则逐渐变为透明。只有第一个规则(对于第 nth-child(1))被应用(并且应用到所有个 child )。

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/

我在这里做错了什么？

Answer 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>