-1
Dies ist wahrscheinlich eine Art von einfacher Aufsicht meinerseits, aber ich habe etwas HTML, das dynamisch von einer PHP-Funktion generiert wird, die die Div-ID zuweist. Ich versuche, einige Elemente speziell für diese Ausgabe-ID zu stylen, so dass die anderen Elemente, die dieselben Klassen auf der Seite verwenden, nicht betroffen sind.Styling mit CSS-ID-Selektor funktioniert nicht
Hier ist mein html:
<div id="myProgress" class="step-progressbar-container step-progressbar-rounded">
<div class="step-progressbar-toplabels">
<span class="step-progressbar-labels-wrapper">
<span class="step-progressbar-steplabel step-progressbar-firststep" style="left: 0%;">0</span>
<span class="step-progressbar-steplabel" style="left: 16.6667%;">25</span>
<span class="step-progressbar-steplabel" style="left: 18%;">
<i class="icon-top material-icons">directions_walk</i></span>
<span class="step-progressbar-steplabel step-progressbar-nextstep" style="left: 33.3333%;">50</span>
<span class="step-progressbar-steplabel" style="left: 50%;">75</span>
<span class="step-progressbar-steplabel" style="left: 66.6667%;">100</span>
<span class="step-progressbar-steplabel step-progressbar-laststep" style="left: 100%;">150</span></span>
</div>
<div class="step-progressbar-bar-wrapper">
<span class="step-progressbar-bar">
<span class="step-progressbar-progress" style="width: 18%;"></span>
<span class="step-progressbar-steps-wrapper">
<span class="step-progressbar-steps">
<span class="step-progressbar-step step-progressbar-firststep" style="left: 0%;"></span>
<span class="step-progressbar-step" style="left: 16.6667%;"></span>
<span class="step-progressbar-step" style="left: 18%;"></span>
<span class="step-progressbar-step step-progressbar-nextstep" style="left: 33.3333%;"></span>
<span class="step-progressbar-step" style="left: 50%;"></span>
<span class="step-progressbar-step" style="left: 66.6667%;"></span>
<span class="step-progressbar-step step-progressbar-laststep" style="left: 100%;"></span></span>
</span>
</span>
</div>
<div class="step-progressbar-bottomlabels">
<span class="step-progressbar-labels-wrapper">
<span class="step-progressbar-steplabel step-progressbar-firststep" style="left: 0%;"></span>
<span class="step-progressbar-steplabel" style="left: 16.6667%;">1X</span>
<span class="step-progressbar-steplabel" style="left: 18%;"></span>
<span class="step-progressbar-steplabel step-progressbar-nextstep" style="left: 33.3333%;">2X</span>
<span class="step-progressbar-steplabel" style="left: 50%;">3x</span>
<span class="step-progressbar-steplabel" style="left: 66.6667%;">4X</span>
<span class="step-progressbar-steplabel step-progressbar-laststep" style="left: 100%;">
<i class="icon-btm material-icons">star</i></span></span>
</div>
und die CSS Ich versuche, mit dem div id-Selektor zu verwenden. Ich habe versucht, ein paar verschiedene Iterationen versucht zu denken es ein Syntaxfehler oder so etwas, aber es kann keine der Klassen mit der ID Ziel erreichen, um sie vorangestellt. (Die Stile funktionieren jedoch ohne den ID-Selektor für die Eltern-ID).
#myprogress.step-progressbar-steplabel {
display: inline-block;
position: absolute;
z-index: 10000;
}
#myprogress.step-progressbar-firststep {
display: none !important;
}
#myprogress.step-progressbar-toplabels .step-progressbar-steplabel {
font-size: 16px;
color: #BBBBBB;
padding-top: 45px;
}
#myprogress.icon-top.material-icons{
font-weight: normal;
font-style: normal;
font-size: 58px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
padding-top: 0px !important;
}