Question

这可能是我的一些简单的疏忽，但我有一些由php函数动态生成的html，它为div分配一个ID。我试图专门为这个输出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>

和css我试图使用div id选择器。我尝试过尝试过几次不同的迭代，认为这是一个语法错误或其他什么，但是不能让它以任何前面带有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;
}

Answer 1

您正在错误地使用选择器

＆＃xA;＆＃xA;

您没有ID myprogress 和 ID的元素class step-progressbar-steplabel 在同一个元素中。

＆＃xA;＆＃xA;

看起来你错过了一个空格，它应该是这样的 #myprogress .step-progressbar-steplabel 不是这样的： #myprogress.step-progressbar-steplabel

＆＃xA;＆＃xA;

https://css-tricks.com/child-and-sibling-selectors/ < / p>＆＃xA;＆＃xA;

另外请使用正确的大小写以避免不匹配：

＆＃xA;＆＃xA;

CSS选择器中的类名是否区分大小写？

＆＃xA;

使用CSS ID选择器设置样式不起作用

1 个答案: