Question

我试图为#past的孩子设计样式，使得最近的孩子完全不透明，并且那些继续变得透明。只应用第一个规则（对于第n个子（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/

我在这里做错了什么？

Answer 1

指定容器无效。您需要指定子类型

＆＃13;

#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;}

＆＃13;

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

＆＃13;

Answer 2

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

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;}

Answer 3

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

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

CSS nth-child仅适用于n = 1

3 个答案: