Question

我有以下HTML代码：

<LI id=treeMenu:2 class="ui-treenode ui-treenode-leaf ui-treenode-unselected" role=treeitem sizset="false" data-nodetype="default" data-rowkey="2" sizcache0014053099738481567="771 85 282">
    <SPAN aria-expanded=false aria-checked=false class="ui-treenode-content ui-tree-selectable" aria-selected=false sizset="false" sizcache0014053099738481567="771 85 282">
        <SPAN class=ui-treenode-leaf-icon></SPAN>
        <DIV class="ui-chkbox ui-widget" sizset="false" sizcache0014053099738481567="771 85 282">
            <DIV class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                <SPAN class="ui-chkbox-icon ui-c"></SPAN>
            </DIV>
        </DIV>
        <SPAN></SPAN>
        <SPAN class="ui-treenode-label ui-corner-all">dfvc</SPAN>
    </SPAN>
</LI>

我只需要将一个CSS规则添加到具有“ui-treenode ui-treenode-leaf ui-treenode-unselected”类的LI组件中，并且除了适用于LI内部的这个div组件：

<DIV class="ui-chkbox ui-widget" sizset="false" sizcache0014053099738481567="771 85 282">

我创建了以下规则但不起作用

li .ui-treenode-leaf span div .ui-chkbox {
   position: relative !important;
   top: -15px !important; 
}

我正在使用IE8，这是从“Primefaces”的Tree组件的节点（没有叶子的节点）生成的HTML（展示示例中的树组件）

什么是正确的CSS规则？

Answer 1

您遇到的一个问题是您的规则是在li内寻找带有“tree-node-leaf”类的标记。

要表明您要定位具有特定类的标记，请不要在标记和类之间添加空格。

li.tree-node-leaf以li为目标。

li .tree-node-leaf定位tree-node-leaf内类li的标记。

ID选择器也是如此，li#id定位ID为li的{{1}}。 id定位li #id内ID为id的元素。

正如Pavlo所说，你应该尽量保持你的选择器 - 它大大增加了维护并减少了小错误成为大问题的机会。

试试这个：

li

Answer 2

这取决于CSS选择器中您想要的层次结构。如果您已经定义了有意义的类名，则不需要包含类型选择器。如果您使用ui-treenode-leaf或div元素实施li，则无关紧要。

.ui-chkbox应该已经足以添加样式信息，除非您在特定上下文中需要不同的样式。但即便如此，.ui-treenode-leaf .ui-chkbox也应该是您所需要的。

您也不应该使用!important。当您需要使用important时，您应该考虑您的课程以及您（其他）选择者的具体情况。

添加特定于具有多个类的组件的css规则

2 个答案: