CSS 伪类帮助 - 在某些标签上不显示答案

【问题标题】：CSS Pseudo classes help - display none on certain labelsCSS 伪类帮助 - 在某些标签上不显示
【发布时间】：2013-10-16 15:19:37
【问题描述】：

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

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

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

【问题讨论】：

如果您可以让您的 CMS 添加标签“for”标签（无论如何它们都应该有），您可以轻松定位您想要显示的标签。事实上，你想隐藏的太多了，我会把它们都隐藏起来，然后只显示你想要的。
哇！真是个笨蛋……谢谢 ;-)
我会把它作为答案。 . .

标签： html css css-selectors pseudo-class

【解决方案1】：

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

【讨论】：

这实际上并没有回答他的问题，考虑将其发布为评论
它确实回答了他的问题——见上面的 cmets。因此，我将其发布为答案。 . .

【解决方案2】：

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

Demo

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

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

第一个选择器只是隐藏了第二个h3，更具体地说，您应该使用span2 h3 而不仅仅是h3，它将隐藏您的h3 元素，在第二个选择器中，我隐藏了所有labels 前面是第二个 h3

【讨论】：

【解决方案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 意味着任何需要帮助阅读网页文本的人都无法获得答案。

【讨论】：