较短的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作为选择的工作，但确实有不必要的副作用，所以这是一个限制。前3个选择器的css来自this。

来源

2017-02-16 musicformellons

你有一个选项，添加'id'属性到您的HTML？ – haxxxton

@haxxxton是的editControl，其他人：没有。 – musicformellons

是他们不得不在这些元素上重写的其他'！重要'样式？你能否提供你正在寻找的html，因为可能会有更高效的遍历。 – haxxxton

-3

css 3有mixin，就像less或sass一样。例如

button { 
 
    display: block; 
 
    margin: 10px; 
 
    @apply --button-style; 
 
} 
 

 
:root { 
 
    --button-style: { 
 
     width: 300px; 
 
     padding: 30px 20px; 
 
     border-radius: 5px; 
 
     background: blue; 
 
     color: #fff; 
 
     font-size: 54px; 
 
     text-transform: uppercase; 
 
    } 
 
} 
 
    .btnOne { 
 
    background: red; 
 
    font-size: 24px; 
 
    padding: 10px; 
 
    border: 0; 
 
}

<!Doctype html> 
 
<html> 
 
<head> 
 
    <title>CSS Mixins</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
</head> 
 

 
<body> 
 
    <section> 
 
     <button class="btnOne"> One </button> 
 
     <button class="btnTwo"> Two </button> 
 
     <button class="btnThree"> Three </button> 
 
    </section> 
 
</body> 
 

 
</html>

在这种example @apply功能是混入。但警告！不工作在IE 9

来源

2017-02-16 08:10:01

谢谢！但我需要IE9 ... – musicformellons

我同情你，但为什么要求IE 9。我知道脚本，女巫说用户更改浏览器到最新版本。[链接到这个构造函数]（https://tech.yandex.com/browser/constructor/） –

这工作**只有**在丁目，是后面的国旗，所以对于一般用法，这是一个没有没有 – LGSon

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

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

，为未经拾起，然后-to明白为什么有人overruled-寻找到“Chrome开发者工具>元素>风格”，这是CSS“在上面选择“为控制要素这使我这个选择这在我的情况下正常工作的一个：

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

来源

2017-02-16 08:30:59 musicformellons

较短的CSS（笔）选择

回答

相关问题