我有这个代码
<div id="editGridReglas" class=" x-row-editor x-small-editor" style="position: absolute; z-index: 11000; width: 1033px; left: 0px; top: 126px; visibility: visible; ">
<div class="x-row-editor-header x-unselectable" id="ext-gen296" style="-webkit-user-select: none; ">
<span class="x-row-editor-header-text">
</span></div>
<div class="x-row-editor-bwrap" id="ext-gen297">
<div class="x-box-inner" id="ext-gen308" style="width: 1033px; height: 22px; ">
<div id="ext-comp-1083" name="ext-comp-1083" class=" x-form-display-field x-box-item" style="width: 22px; left: 1px; top: 0px; ">
</div>
<input type="text" size="20" autocomplete="off" id="ideprodcnt" name="ideprodcnt"
class="x-form-text x-form-field x-box-item" style="width: 251px; left: 24px; top: 0px; " title="">
<input type="text" size="20" autocomplete="off" id="ideplan" name="ideplan"
class="x-form-text x-form-field x-box-item" style="width: 251px; left: 276px; top: 0px; " title="">
<input type="text" size="20" autocomplete="off" id="iderev" name="iderev"
class="x-form-text x-form-field x-box-item" style="width: 251px; left: 528px; top: 0px; " title="">
<div class="x-form-check-wrap x-box-item" id="ext-gen319" style="width: 249px; left: 781px; top: 0px; ">
<input type="checkbox" autocomplete="off" id="estado" name="estado" class=" x-form-checkbox x-form-field" checked="">
<label for="estado" class="x-form-cb-label" id="ext-gen320"> </label>
</div>
<div id="ext-comp-1078" name="ext-comp-1078" class="x-form-display-field" style="width: 22px; left: 1px; top: 0px; ">
</div>
<input type="text" size="20" autocomplete="off" id="ideprodcnt" name="ideprodcnt"
class="x-form-text x-form-field" style="width: 251px; left: 25px; top: 0px; " title="">
<input type="text" size="20" autocomplete="off" id="ideplan" name="ideplan"
class="x-form-text x-form-field" style="width: 251px; left: 278px; top: 0px; " title="">
<input type="text" size="20" autocomplete="off" id="iderev" name="iderev"
class="x-form-text x-form-field" style="width: 251px; left: 531px; top: 0px; " title="">
<div class="x-form-check-wrap" id="ext-gen309" style="width: 249px; left: 785px; top: 0px; ">
<input type="checkbox" autocomplete="off" id="estado" name="estado" class=" x-form-checkbox x-form-field" checked="">
<label for="estado" class="x-form-cb-label" id="ext-gen310"> </label>
</div>
</div>
</div>
</div>
我需要隐藏所有在类中没有单词"x-box-item"的输入,除了这个组件:
<input type="checkbox" autocomplete="off" id="estado" name="estado" class=" x-form-checkbox x-form-field" checked="">
该组件位于div标签中:
<div class="x-form-check-wrap x-box-item" id="ext-gen319" style="width: 249px; left: 781px; top: 0px; ">
<input type="checkbox" autocomplete="off" id="estado" name="estado" class=" x-form-checkbox x-form-field" checked="">
<label for="estado" class="x-form-cb-label" id="ext-gen320"> </label>
</div>
我使用这个规则css:
#editGridReglas input:not(.x-box-item){
visibility: hidden;
}
#editGridReglas div .x-box-item input[type=checkbox]{
visibility: visible;
}
这两个规则都很好,但无论如何,我想知道我是否正确使用了CSS规则
[编辑]
在IE 8 上
#editGridReglas input.x-form-text.x-form-field {
visibility: hidden;
}
#editGridReglas input.x-box-item {
visibility: visible !important;
}
#editGridReglas div.x-form-check-wrap.x-box-item input{
visibility: visible !important;
}
您可以只使用#estado {visibility:visible;}
,因为它有ID。如果它无法显示,您可以将!important
放在次要规则中:
#estado {visibility:visible !important;}
或
#editGridReglas div input[type=checkbox]:not(.x-box-item) {visibility:visible !important;}
如果ID是后端的,CSS将不知道ID。
编辑2:从我下面的评论中添加第三种方式。
div.x-box-item input[type=checkbox] {visibility:visible !important}
这一个查找具有x-box-item的DIV作为一个类,在其中输入复选框,并使其可见。根据您上面的HTML,应该可以工作。