html - CSS 类未加载，但其他所有内容都已加载

Question

我的类(class)有问题 boxPad不想加载所有其他类的等都显示在检查面板中，而不是 boxPad为什么？

HTML:

<div class="infusion-holder yes boxPad">Some Info</div>

CSS:

.infusion-holder{display:none;}
.yes{display:block !important;}
.infusion-holder .yes .boxPad {padding-bottom:155px;}
.infusion-holder h3.ftitle{margin-bottom:10px !important;}
.infusion-holder form.infusion-form{border-top:1px solid #fff; padding-top:20px;}
.infusion-submit p{text-align:center; color:#fff; font-size:18px;}
.fdesc{padding-bottom:15px;}
.infusion-holder .infusion-submit input{margin-top:0px !important;}
.box1 form.infusion-form {display:inline-block; float:left; padding:0 15px 155px 0; border-top:none;}
.box2 form.infusion-form {display:inline-block; float:left; padding:0 15px 155px 0; border-top:none;}
.box3 form.infusion-form {display:inline-block; float:left; padding:0 15px 155px 0; border-top:none;}

标记: `

    <div class="box1">
        <form class="infusion-form" action="#">
            <div class="infusion-submit">
                <p></p>
                <input type="submit" value="Download PDF" />
            </div>
        </form>
    </div>
    <div class="box2">
        <form class="infusion-form" action="#">
            <div class="infusion-submit">
                <p></p>
                <input type="submit" value="Download PDF" />
            </div>
        </form>
    </div>
    <div class="box3">
        <form class="infusion-form" action="#">
            <div class="infusion-submit">
                <p></p>
                <input type="submit" value="Download PDF" />
            </div>
        </form>
    </div>

`

Answer 1

Selector .infusion-holder .yes .boxPad {} 正在选择一个带有类 boxPad 的元素，里面有类 yes 的元素，里面有类 infusion-holder.

要像您的示例一样选择具有所有三个类的元素 - 您需要使用选择器

.infusion-holder.yes.boxPad {}