html - 我可以使用 css 获得此结构中的第一个 child 和最后一个 child 吗？动态的东西，按钮的数量可以增加减少

Question

我可以使用 css 获得此结构中的第一个 child 和最后一个 child 吗？动态的东西，按钮的数量可以增加减少。

<div  class="z-vlayout-inner">
                <button type="button" id="f6wP40">Textures</button>
                </div>
                <div  class="z-vlayout-inner">
                <button type="button" id="f6wP50">Special Diets</button>
                </div>
                <div class="z-vlayout-inner">
                <button type="button" id="f6wP60" >Allergies</button>
                </div>
                <div  class="z-vlayout-inner">
                <button type="button" id="f6wP70" >Dislikes</button>
                </div>

Answer 1

使用 css 选择器 :first-of-type 和 :last-of-type

.z-vlayout-inner:first-of-type button, .z-vlayout-inner:last-of-type button{
  background-color:yellow
  }

<div  class="z-vlayout-inner">
                <button type="button" id="f6wP40">Textures</button>
                </div>
                <div  class="z-vlayout-inner">
                <button type="button" id="f6wP50">Special Diets</button>
                </div>
                <div class="z-vlayout-inner">
                <button type="button" id="f6wP60" >Allergies</button>
                </div>
                <div  class="z-vlayout-inner">
                <button type="button" id="f6wP70" >Dislikes</button>
                </div>