27

我正在实现一个 JSF 组件库，您必须在其中覆盖正在使用的 css，否则它将使用其默认 css。我试图隐藏div并且我试图设置rich-panelbar-header-act class style="display:none"，但随后它会拉入其默认 css。有没有办法添加一个rich-panelbar-header-act隐藏的样式属性（因为我必须实现类）div？我在下面包含了我的 css 和 html

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

6 回答 6

58 
width: 0; height: 0;

或者

visibility: hidden;

或者

opacity: 0;

或者

position: absolute; top: -9999px; left: -9999px;

要不就

display: none !important;
于 2013-04-06T20:48:25.073 回答
5

我想visibility:hidden;会帮助你。:)

于 2013-04-06T20:48:12.907 回答
2

这对我有用..

!important不能在 amp 版本中使用，所以不要display:none;使用这个：

position: absolute; top: -9999px; left: -9999px;
于 2017-06-28T10:27:45.393 回答
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>
于 2013-04-06T20:48:28.400 回答
0

这个问题已经得到解答，尽管我看到最初的答案有几个缺陷......虽然他们将元素视觉上从屏幕上移开，但网络可访问性指南建议不要使用其中的几个。

提供一个更简单、更好的答案visibilty: hidden;将是一种选择，但如果您需要该元素所在的空间，那display: none !important;将是您的最佳选择。该标记!important应该覆盖作用于它的其他 CSS 元素<div>。

如上所述，position: absolute; top: -9999px; left: -9999px;根据 Web 可访问性指南，简单地将元素视觉上移出页面（例如 ）不被视为最佳实践，因为大多数电子阅读器仍会阅读元素中的任何文本，并且键盘用户可能会导航到该元素，即使它位于“屏幕外”。

display: none !important如果我有其他 CSS 类作用于我需要隐藏的元素，我通常会使用它。

于 2019-10-10T15:13:42.953 回答
0

我想这会帮助你

您可以通过 2 种方式执行此操作：

使用更多属性

你可以简单地使用这个：[编辑：添加 !important 到属性]

visibility: hidden!important;position: absolute!important; top: -9999px!important; left: -9999px !important;opacity: 0 !important;width: 0 !important; height: 0!important;

我认为它会起作用。它使用了所有可以在 CSS 中使用的属性。

使用 !important 元素

display:none!important
于 2021-01-24T14:34:22.763 回答