1

我有以下 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>

我只需要向具有“ui-treenode ui-treenode-leaf ui-treenode-unselected”类的 LI 组件添加 CSS 规则，此外还适用于 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”的树组件的节点（没有叶子的节点）生成的 HTML（展示示例中的树组件）

什么是正确的 CSS 规则？

4

2 回答 2

1

您遇到的一个问题是您的规则是在li.

要表明您要针对具有特定类的标签，请不要在标签和类之间放置空格。

li.tree-node-leafli以该类为目标。

li .tree-node-leaf以 .中的类tree-node-leaf为目标li。

ID 选择器也是如此，li#id目标是liID 为id. 以 . 中具有 ID的li #id元素为目标。idli

正如 Pavlo 所说，你应该尽量让你的选择器尽可能简单——它大大增加了维护并减少了小错误变成大问题的机会。

尝试这个：

li.ui-treenode-leaf span div.ui-chkbox {
   position: relative !important;
   top: -15px !important; 
}
于 2013-05-08T18:39:37.990 回答
0

这取决于您想要在 CSS 选择器中使用哪种层次结构。如果您已经定义了有意义的类名，则不需要包含类型选择器。没关系，如果您使用 a或元素实现ui-treenode-leafs 。divli

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

你也不应该使用!important. 当您需要使用important时，您应该考虑您的类以及您的（其他）选择器的具体程度。

于 2013-05-08T18:39:11.297 回答