我正在尝试隐藏从背面开始的nthdiv元素。使用:nth-last-child(n)选择器仅隐藏在DIV中而不是DIV本身内的最后一个元素。
我尝试了以下内容:
.block:nth-last-child(1){display:none;}
以上没有做任何事情
.block:nth-last-child(1){display:none;}
以上仅隐藏了div
.block:nth-last-child(1) {display:none;}
<div class='block'>
<button type="button">a</button>
<button type="button">b</button>
<button type="button">c</button>
</div>
<div class='block'>
<button type="button">a</button>
<button type="button">b</button>
<button type="button">c</button>
</div>
<div class='block'>
<button type="button">a</button>
<button type="button">b</button>
<button type="button">c</button>
</div>
<div class='block'>
<button type="button">a</button>
<button type="button">b</button>
<button type="button">c</button>
</div>
.block:nth-last-child(2) {display:none;}
有" parent"元素才能拥有"孩子"
.block:nth-last-child(2) {display:none;}
<div class='parent'>
<div class='block'>
<button type="button">a0</button>
<button type="button">b0</button>
<button type="button">c0</button>
</div>
<div class='block'>
<button type="button">a1</button>
<button type="button">b1</button>
<button type="button">c1</button>
</div>
<div class='block'>
<button type="button">a2</button>
<button type="button">b2</button>
<button type="button">c2</button>
</div>
<div class='block'>
<button type="button">a3</button>
<button type="button">b3</button>
<button type="button">c3</button>
</div>
</div>
您的选择器错了,您需要指定要选择按钮。
类似的东西:
.block button:last-child {display:none;}
<div class='block'>
<button type="button">1a</button>
<button type="button">1b</button>
<button type="button">1c</button>
</div>
<div class='block'>
<button type="button">2a</button>
<button type="button">2b</button>
<button type="button">2c</button>
</div>
<div class='block'>
<button type="button">3a</button>
<button type="button">3b</button>
<button type="button">3c</button>
</div>
<div class='block'>
<button type="button">4a</button>
<button type="button">4b</button>
<button type="button">4c</button>
</div>