css - 更短的 css(手写笔)选择器

Question

如何聚合/缩短这些手写笔选择器？:

#map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(1) > button
#map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(2) > button.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in
#map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(2) > button.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out
#map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(2) > button.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass
#editControl > button
  min-height 0 !important
  border-radius 0 !important

只需将 .button 作为选择器就可以了，但确实有不需要的副作用，所以这是一个限制。前3个选择器的css来自this .

Answer 1

可能不是最聪明的问题。无论如何，我首先使用解决了它:

.mapboxgl-control-container .mapboxgl-ctrl-top-left .button,
#editControl > button

作为选择器，它没有被选中，然后 - 看看为什么它被否决了 - 查看“Chrome 开发者工具 > 元素 > 样式”，其中一个控制元素的 css 位于“顶部”，这让我找到了这个选择器在我的情况下效果很好:

.mapboxgl-ctrl-group > button,
#editControl > button
  min-height 0
  border-radius 0