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用户，请使用equality attribute selector。

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

Answer 3

没有类或ID，以及您的特定html：

table tr td label {display:none}

否则，如果你有jQuery

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

Answer 4

您还必须为标签提供单独的ID。

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

#foo_label {display: none;}

或隐藏整行

<tr id="foo_row">/***/</tr>

#foo_row {display: none;}

Answer 5

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

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

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

W3C and WAI提供了有关此主题的更多指南，包括用于“剪辑”技术的CSS。

Answer 6

您应该为<tr>标记提供ID foo_row或其他内容。而隐藏它

Answer 7

您可能需要添加一个类/ id，然后再创建一个隐藏它的CSS声明。

Answer 8

这对我有用。

#_account_id{
        display: none;
    }
    label[for="_account_id"] { display: none !important; }

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

8 个答案: