CSS 如何在CSS中按元素ID隐藏元素标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2694683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide element label by element id in CSS?
提问by Stoob
Let's say I've got this code
假设我有这个代码
<table>
<tr>
<td><input id="foo" type="text"></td>
<td><label for="foo">This is foo</label></td>
</tr>
</table>
This will hide the input:
这将隐藏输入：
#foo { display: none;} /* or hidden could work too, i guesss */
How do I hide the label?
如何隐藏标签？
回答by Nick Craver
If you give the label an ID, like this:
如果你给标签一个 ID，像这样：
<label for="foo" id="foo_label">
Then this would work:
那么这将起作用：
#foo_label { display: none;}
Your other options aren't really cross-browser friendly, unless javascript is an option. The CSS3 selector, not as widely supported looks like this:
您的其他选项并不是真正的跨浏览器友好，除非 javascript 是一个选项。不受广泛支持的 CSS3 选择器如下所示：
[for="foo"] { display: none;}
回答by Andy E
If you don't care about IE6 users, use the equality attribute selector.
如果您不关心 IE6 用户，请使用等式属性选择器。
label[for="foo"] { display:none; }
回答by Kerri
Despite other answers here, you should notuse display:noneto hide the label element.
尽管这里其他的答案，你应该不使用display:none隐藏标签元素。
The accessible way to hide a label visually is to use an 'off-left' or 'clip' rule in your CSS. Using display:nonewill prevent people who use screen-readers from having access to the content of the label element. Using display:none hides content from allusers, and that includes screen-reader users (who benefit most from label elements).
可视化隐藏标签的可访问方法是在 CSS 中使用“off-left”或“clip”规则。使用display:none将阻止使用屏幕阅读器的人访问标签元素的内容。使用 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;
}
The W3C and WAIoffer more guidance on this topic, including CSS for the 'clip' technique.
在W3C和WAI提供有关此主题的更多指导，包括CSS的“夹”技术。
回答by James Westgate
Without a class or an id, and with your specific html:
没有类或 id，并带有您的特定 html：
table tr td label {display:none}
Otherwise if you have jQuery
否则，如果你有 jQuery
$('label[for="foo"]').css('display', 'none');
回答by Draco Ater
You have to give a separate id to the label too.
您也必须为标签提供单独的 ID。
<label for="foo" id="foo_label">text</label>
#foo_label {display: none;}
Or hide the whole row
或者隐藏整行
<tr id="foo_row">/***/</tr>
#foo_row {display: none;}
回答by ghoppe
You should give your <tr>tag an id foo_rowor whatever. And hide that instead
你应该给你的<tr>标签一个 idfoo_row或其他什么。并隐藏它
回答by steve
You probably have to add a class/id to and then make another CSS declaration that hides it as well.
您可能必须添加一个类/ID，然后再创建另一个隐藏它的 CSS 声明。
回答by Naveenbos
This is worked for me.
这对我有用。
#_account_id{
display: none;
}
label[for="_account_id"] { display: none !important; }
