Question

我有这段代码

<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">&nbsp;</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">&nbsp;</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">&nbsp;</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;
}

Answer 1

您可以使用#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，应该可以工作。

规则CSS部分应用

1 个答案: