這可能是我的一些簡單的監督,但我有一些html動態生成的php函數爲div賦予一個ID。我試圖爲這個輸出ID專門設計一些元素,所以它不會影響可能在頁面上使用相同類的其他元素。使用CSS ID選擇器不起作用的樣式
這裏是我的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>
我試圖用DIV id選擇要使用的CSS。我試過嘗試了幾次不同的迭代,認爲它是一個語法錯誤或某些東西,但無法使它定位到任何帶有ID前綴的類。 (這些樣式在沒有父div 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;
}