較短的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（筆）選擇

回答

相關問題