Html 样式的CSS替代品="；显示：无“；_Html_Css_Richfaces

Html 样式的CSS替代品="；显示：无“；

html css

Html 样式的CSS替代品="；显示：无“；,html,css,richfaces,Html,Css,Richfaces,我正在实现一个JSF组件库，您必须覆盖正在使用的css，否则它将使用默认的css。我试图隐藏div，并尝试设置丰富的panelbar标题act class style=“display:none”，但随后它会拉入默认css。有没有办法向富panelbar header act（因为我必须实现该类）添加一个样式属性来隐藏div？我在下面包括了我的css和html CSS: element.style { } Matched CSS Rules .rich-panelbar-header-act {

我正在实现一个JSF组件库，您必须覆盖正在使用的css，否则它将使用默认的css。我试图隐藏

div

，并尝试设置

丰富的panelbar标题act class style=“display:none”

，但随后它会拉入默认css。有没有办法向

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

HTML:

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


在使用AJAX时充分利用JSF的全部优势在使用AJAX时充分利用JSF的全部优势
Ajax4jsf完全集成到JSF生命周期中。而其他框架仅限于
Ajax4jsf使您能够访问托管bean工具，从而有利于操作和价值
更改侦听器，以及在测试期间调用服务器端验证程序和转换器
AJAX请求-响应周期。

我想

可见性：隐藏将帮助您。：）
或
或
或
或者只是
display: none !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>

函数hidediv（）{
if（document.getElementById）{//DOM3=IE5，NS6
document.getElementById（'DIVIDNAME'）。style.display='none'；
}否则{
if（document.layers）{//Netscape 4
document.DIVIDNAME.display='hidden'；
}否则{//IE 4
document.all.DIVIDNAME.style.display='none'；
}}}
这对我很有用
！重要信息
不能在amp版本中使用，因此代替显示：无使用以下命令：
position: absolute; top: -9999px; left: -9999px;

这个问题已经得到了回答，尽管我发现原来的答案有一些缺陷。。。虽然网页可访问性指导原则让元素从屏幕上直观地消失，但建议不要使用其中的两个元素
为了提供更简单、更好的答案，visibility:hidden
将是一个选项，但是如果您需要元素所在的空间，display:none！重要的将是您的最佳选择。标签！重要信息
应覆盖作用于该
的其他CSS元素
如上所述，根据web可访问性指南，简单地将元素从页面上移出（例如，位置：绝对；顶部：-999px；左侧：-999px；
）不被视为最佳做法，因为大多数电子阅读器仍将阅读元素中的任何文本，键盘用户可能能够导航到该元素，即使它位于“屏幕外”
我通常使用显示：无！重要信息
如果有其他CSS类作用于需要隐藏的元素。我想这会对您有所帮助
您可以通过两种方式执行此操作：
使用更多属性
您只需使用以下命令即可：[编辑：已添加！对属性很重要]
visibility: hidden!important;position: absolute!important; top: -9999px!important; left: -9999px !important;opacity: 0 !important;width: 0 !important; height: 0!important;

我认为它会起作用。
它使用CSS中可以使用的所有属性
使用！要素
请发布CSS代码。我不明白为什么显示：没有一个不起作用。使用更具体的选择器？@explosion/css/htmlNote关于可访问性：屏幕阅读器将忽略使用display:none
和visibility:hidden
隐藏的元素（这是非常好的意图），但仍会读出那些位于视口之外的元素（通过负文本缩进或左/右翻译）。我认为一个屏幕阅读器（是画外音吗？）会忽略高度为0的元素，但其他阅读器不会。因此，请注意，一些用户仍然会在您认为您的（并非如此）隐藏内容时感知到它。定位在视口之外通常称为。在CSS框架和CMS模板中视觉隐藏
来表达这一点。相关：不要使用top:-9999px
，因为这可能会导致使用键盘在内容中导航的用户视觉跳转到页面顶部并返回到以前的位置<代码>左：-9999px（或RTL语言中的右键）可以，因为它不会垂直移动滚动位置，并且足够了。这涉及到可聚焦的元素（链接，基本上是表单元素），但由于左边的权限足够，最好在几年后完全避免顶部，这似乎也是一个有趣的选择：行高：0；溢出：隐藏；填充：0；边距：0h，w-0正是我想要的，没有任何东西阻止某些组件在就绪事件时完全加载。。我想
position: absolute; top: -9999px; left: -9999px;

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

display:none!important