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

如何汇总/缩短这些手写笔选择器？：

#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作为选择器将起作用，但确实会产生有害的副作用，因此这是一个限制。前三个选择器的css来自this。

最佳答案

这可能不是最聪明的问题。无论如何，我首先使用以下方法解决了问题：

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

作为未选择的选择器，然后-看看为什么它被否决了-查看“ Chrome开发者工具>元素>样式”，其中css在控制元素之一的“最上方”，这导致我选择器工作正常就我而言：

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