我正在实现一个JSF组件库，你必须覆盖正在使用的css，否则它将使用其默认的css。我正在尝试隐藏div，我试图设置rich-panelbar-header-act class style="display:none"，但它会拉入默认的css。有没有办法将样式属性添加到rich-panelbar-header-act（因为我必须实现该类）隐藏div？我在
CSS：
element.style {
}
Matched CSS Rules
.rich-panelbar-header-act {
background-image: url(/spot-main-web/a4j/g/3_3_3.Finalorg.richfaces.renderkit.html.GradientA/DATB/eAGLj48PDQ1lBAAJswIe.html);
background-position: top left;
background-repeat: repeat-x;
vertical-align: middle;
color: #FFF;
background-color: #555;
font-size: 11px;
font-weight: bold;
font-family: Arial,Verdana,sans-serif;
}
.rich-panelbar-header-act {
border: 0 solid red;
padding: 0 1px 1px 5px;
cursor: pointer;
}
user agent stylesheetdiv {
display: block;
}
Inherited from body.browserChrome.browserChrome2
body {
font: 12px/17px Helvetica, Arial, Verdana;
}
HTML：
<html version="XHTML 2.0" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div class="rich-panelbar rich-panelbar-b " id="j_id95" style="padding: 0px; height: 400px; width: 500px; none">
<div class="rich-panelbar rich-panelbar-interior " id="j_id96" style="none"><div class="rich-panelbar-header " style=";">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-header-act " style=";;;;display: none;">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-content-exterior" style="display: none; width: 100%;"><table cellpadding="0" cellspacing="0" style="height: 100%;" width="100%"><tbody><tr><td class="rich-panelbar-content " style=";">
Ajax4jsf is fully integrated into the JSF lifecycle. While other frameworks only
give you access to the managed bean facility, Ajax4jsf advantages the action and value
change listeners as well as invokes server-side validators and converters during the
AJAX request-response cycle.</td></tr></tbody></table></div></div>
</div>
</body>
</html>
答案 0 :(得分：38)
width: 0; height: 0;
或
visibility: hidden;
或
opacity: 0;
或
position: absolute; top: -9999px; left: -9999px;
或只是
display: none !important;
答案 1 :(得分：4)
我想visibility:hidden;会帮助你。 ：）
答案 2 :(得分：1)
使用！important来阻止它被覆盖 -
.rich-panelbar-header-act {
display:none !important;
}
您也可以使用JavaScript作为备份 -
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('DIVIDNAME').style.display = 'none';
}else {
if (document.layers) { // Netscape 4
document.DIVIDNAME.display = 'hidden';
}else { // IE 4
document.all.DIVIDNAME.style.display = 'none';
}}}
</script>
答案 3 :(得分：1)
这对我有用..
SimpleXMLElement无法在放大器版本中使用，因此请使用此代替!important：
display:none;答案 4 :(得分：0)
这个问题已经得到解答，尽管我最初看到的问题有几个缺陷……虽然它们在视觉上使元素脱离屏幕，但网络可访问性指南建议不要使用其中几个。
要提供一个更简单，更好的答案，visibilty: hidden;是一个选择，但是如果您需要元素所占据的空间，display: none !important;是您的最佳选择。标签!important应该覆盖作用在该<div>上的其他CSS元素。
如上所述，根据网络可访问性准则，简单地将元素从页面上直观地移出页面（例如position: absolute; top: -9999px; left: -9999px;）不被视为最佳实践，因为大多数电子阅读器仍会读取您所输入的任何文本包含在该元素中，即使该元素位于“屏幕外”，键盘用户也可以导航到该元素。
如果我有其他CSS类作用于需要隐藏的元素，我通常使用display: none !important。
答案 5 :(得分：0)
您可以通过两种方式执行此操作：
你可以简单地使用这个：[编辑：添加！重要到属性]
visibility: hidden!important;position: absolute!important; top: -9999px!important; left: -9999px !important;opacity: 0 !important;width: 0 !important; height: 0!important;
我认为它会起作用。 它使用了所有可以在 CSS 中使用的属性。
display:none!important