如何在CSS中按元素id隐藏元素标签？

Question

假设我已经有了这段代码

<table>
    <tr>
        <td><input id="foo" type="text"></td>
        <td><label for="foo">This is foo</label></td>
    </tr>
</table>

这将隐藏输入:

#foo { display: none;}  /* or hidden could work too, i guesss */

如何隐藏标签？

Answer 1

如果您为标签提供ID,如下所示:

<label for="foo" id="foo_label">

然后这将工作:

#foo_label { display: none;}

你的其他选择并不是真正的跨浏览器友好,除非javascript是一个选项.没有广泛支持的CSS3选择器如下所示:

[for="foo"] { display: none;}

Answer 2

如果您不关心IE6用户,请使用等于属性选择器.

label[for="foo"] { display:none; }

Answer 3

没有类或id,以及您的特定html:

table tr td label {display:none}

否则,如果你有jQuery

$('label[for="foo"]').css('display', 'none');

Answer 4

尽管这里其他的答案，你应该不使用display:none隐藏标签元素。

可视地隐藏标签的可访问方法是在CSS中使用“左偏”或“剪切”规则。使用display:none将阻止使用屏幕阅读器的人员访问label元素的内容。使用display：none不会向所有用户隐藏内容，包括屏幕阅读器用户（从标签元素中受益最大）。

label[for="foo"] { 
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

在W3C和WAI提供有关此主题的更多指导，包括CSS的“夹”技术。