короче 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 первых 3 селекторов происходит от this.

источник

2017-02-16 musicformellons

у вас есть возможность добавить 'id' атрибуты вашего HTML? – haxxxton

@haxxxton да для editControl, для остальных: нет. – musicformellons

- это их другие стили '! Important', которые вам нужно переопределить на этих элементах? можете ли вы предоставить html, который вы ищете, так как может быть более эффективный обход. – haxxxton

-3

css 3 есть миксины, точно так же, как и менее. Например

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 функции Mixin. Но предупреждение! Не работает в IE 9

источник

2017-02-16 08:10:01

Спасибо! Но мне нужен IE9 ... – musicformellons

Сочувствую вам. Но зачем нужен IE 9. Я знаю скрипт, with talk user change browser для самых новых версий. [Ссылка на этот конструктор] (https://tech.yandex.com/browser/constructor/) –

Это работает ** только ** в Chome и находится за флаг, поэтому для общего использования это нет нет – LGSon

Не самый умный вопрос. Во всяком случае, я решил ее первым использованием:

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

в качестве селектора, который не был подобран, а затем -в понять, почему он overruled- смотрит в «Chrome инструменты для разработчиков> элементы> стиль», который был CSS «на вершине 'для одного из элементов управления, которые привели меня к этому селектору, прекрасно работает в моем случае:

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

источник

2017-02-16 08:30:59 musicformellons

короче CSS (стилус) селектор

ответ

Смежные вопросы