2

我有以下 HTML（由 CMS 自动生成），我想对下面我评论过的display:none;所有s 使用 CSS，但不是提交按钮。label<!--remove from here downwards -->

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

<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>
4

3 回答 3

3

您需要使用这些选择器来隐藏h3,label以及checkbox您评论的位置

演示

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

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

第一个选择器只是隐藏了 2nd h3，更具体地说，你应该使用span2 h3而不只是h3which 会隐藏你的h3元素，在第二个选择器中，我隐藏了所有label以 2nd 开头的 sh3

于 2013-10-09T10:32:16.363 回答
0

如果您可以让您的 CMS 添加标签“for”标签（无论如何它们都应该有），您可以轻松定位您想要显示的标签。其实你想隐藏的太多了，我把它们都隐藏起来，然后只显示你想要的

于 2013-10-09T10:28:14.233 回答
0

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

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

而不是：

display:none;

这样，屏幕阅读器仍然可以阅读文本，但在屏幕上隐藏起来。display: none 意味着任何需要帮助阅读网页文本的人都无法获得答案。

于 2013-10-28T11:53:18.650 回答