如何为页面中首个“Picking out”按钮编写CSS选择器

假设这些按钮拥有共同的标识（比如类名、自定义属性等），可以用以下几种方式精准定位第一个按钮：

• :first-of-type伪类：适用于按钮为同类型元素（如<button>）且处于同一父容器下的场景

  button.pick-btn:first-of-type {
    /* 此处编写样式，或用于定位点击 */
  }
  

• :first-child伪类：如果目标按钮是其父容器的第一个子元素

  .pick-btn:first-child {
    /* 此处编写样式，或用于定位点击 */
  }
  

• :nth-child(1)伪类：明确指定选取父容器下的第1个匹配元素，位置固定时更稳妥

  .pick-btn:nth-child(1) {
    /* 此处编写样式，或用于定位点击 */
  }
  

• 结合父容器定位：若按钮在特定父元素内，先锁定父容器再选取第一个按钮

  .btn-group .pick-btn:first-of-type {
    /* 此处编写样式，或用于定位点击 */
  }
  

提示：如果按钮的共同标识是自定义属性（如[data-type="pick"]），只需把上面的类名替换为对应属性选择器即可，比如[data-type="pick"]:first-of-type。

内容的提问来源于stack exchange，提问作者Rock