部分应用规则 CSS [关闭]

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