2016-09-20 128 views
-1

這可能是我的一些簡單的監督,但我有一些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; 
} 

回答