-1
これはおそらく私の一部の簡単な見落としですが、divをIDに割り当てるPHP関数によって動的に生成されるhtmlがいくつかあります。私は、この出力IDのためにいくつかの要素をスタイルすることを試みているので、ページ上で同じクラスを使うかもしれない他の要素には影響しません。CSS IDセレクタを使ったスタイリングは動作しません
<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：
は、ここに私のhtmlです。私はそれが文法エラーか何かであると思っていくつかの異なる反復を試してみましたが、それらの前に付されたIDを持つクラスを対象にすることはできません。 （ただし、スタイルは親div IDセレクターなしでも機能します）。あなたは間違って
あなたは同じ要素でID myprogressとクラスstep-progressbar-steplabelを持つ要素を持っていないセレクタを使用している
#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;
}