kürzer css (Stift) Selektor

Wie kann ich aggregieren/kürzer diese Griffel Selektoren machen ?:kürzer css (Stift) Selektor

#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

Gerade .button als Wähler mit funktionieren würde, aber unerwünschte Nebenwirkungen haben, so dass eine Beschränkung ist. Die CSS der ersten 3 Selektoren kommt von this.

Quelle

2017-02-16 musicformellons

haben Sie eine Option hinzuzufügen 'id' zu Ihrem hTML-Attributen? – haxxxton

@haxxxxton ja für das editControl, für die anderen: nein. – musicformellons

sind ihre anderen '! Wichtigen' Stile, die Sie für diese Elemente überschreiben müssen? Könnten Sie bitte den HTML-Code angeben, den Sie suchen, da es möglicherweise eine effizientere Traversierung gibt. – haxxxton

-3

css 3 haben Mixins, genau wie weniger oder sass. Zum Beispiel

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>

In dieser example @apply Funktion ist mixin. Aber Warnung! Nicht in IE 9

Quelle

2017-02-16 08:10:01

Danke! Aber ich benötige IE9 ... – musicformellons

Ich sympathisiere Sie.Aber warum IE 9 benötigen. Ich weiß Script, Hexe sprechen Benutzer Browser auf neueste Versionen zu ändern. [Link zu diesem Konstruktor] (https://tech.yandex.com/browser/constructor/) –

Dies funktioniert ** nur ** in Chome, und ist hinter einem Flag, so für den allgemeinen Gebrauch ist es ein Nein Nein – LGSon

Nicht die klügste Frage wahrscheinlich. Wie auch immer, ich löse es, indem zuerst:

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

als Wähler, die nicht abgeholt wurden und dann -zu zu sehen, warum es overruled- war auf der Suche in der Chrome-Entwickler-Tool> Elemente> Stil ", die css‚war am Anfang 'für eine der Steuerelemente, die mich zu diesem Selektor geführt, die in meinem Fall gut funktioniert:

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

Quelle

2017-02-16 08:30:59 musicformellons

kürzer css (Stift) Selektor

Antwort

Verwandte Themen