Question

我有以下HTML（由CMS自动生成），我想使用CSS display:none;下面所有label我评论但不是提交按钮

我认为最简单的方法是使用Pseudo类，但这让我感到困惑。

<div class="span2" style="margin-left:0px">
        <h3>School</h3>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="25" id="tag_25" name="id[]">Pre-Prep
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="26" id="tag_26" name="id[]">Junior
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="27" id="tag_27" name="id[]">Senior
        </label>
        <!--remove from here downwards -->
        <h3>Event</h3>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="29" id="tag_29" name="id[]">Examination
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="30" id="tag_30" name="id[]">Sport/Games
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="31" id="tag_31" name="id[]">Presentation
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="32" id="tag_32" name="id[]">Religious Observance
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="33" id="tag_33" name="id[]">Staff Event
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="34" id="tag_34" name="id[]">Reports/Grades
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="35" id="tag_35" name="id[]">Society/Activity
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="36" id="tag_36" name="id[]">Visit
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="37" id="tag_37" name="id[]">Parents’ Event
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="38" id="tag_38" name="id[]">Music/Drama
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="39" id="tag_39" name="id[]">Special Event
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="40" id="tag_40" name="id[]">Charity/Community
        </label>
                <label class="checkbox" style="clear: both;padding-bottom: 0;">
            <input class="margin-top: 0;" type="checkbox" value="41" id="tag_41" name="id[]">Alumni
        </label>
        <input type="submit" value="Submit" class="btn black">
    </div>

Answer 1

您需要使用这些选择器来隐藏您评论过的h3，label和checkbox

Demo

h3:nth-of-type(2) {
    display: none;
}

h3:nth-of-type(2) ~ label {
    display: none;
}

第一个选择器只隐藏第二个h3，为了更具体一点，您应该使用span2 h3而不仅仅h3来隐藏您的h3元素，并且第二个选择器，我隐藏了所有label s，前面是第二个h3

Answer 2

如果您可以让CMS为标签添加标签（无论如何都应该有），您可以轻松定位您想要展示的标签。事实上，有很多你想隐藏的东西，我会把它们全部藏起来，然后只显示你想要的那些

Answer 3

一些建议而不是答案，但您应该考虑使用视觉上隐藏的技术，例如：

border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;

而不是：

display:none;

通过这种方式，屏幕阅读器仍然可以读取文本，但在视觉上隐藏在屏幕上。 display：none表示任何需要帮助阅读网页上文字的人都无法获得答案。

CSS伪类帮助 - 在某些标签上不显示任何内容

3 个答案: