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

あなたが持っている1つの問題は、あなたのルールがクラス内の「tree-node-leaf」のタグを探していることですli.

特定のクラスのタグをターゲットにすることを示すには、タグとクラスの間にスペースを入れないでください。

li.tree-node-leafliそのクラスで をターゲットにします。

li .tree-node-leaftree-node-leaf内のクラスを持つタグをターゲットにしliます。

同じことが ID セレクターで行われ、の ID を持つ をli#idターゲットにします。 内のID を持つ要素をターゲットにします。liidli #ididli

Pavlo が言ったように、セレクターはできるだけシンプルに保つようにしてください。これにより、メンテナンスが大幅に増加し、小さなミスが大きな問題になる可能性が減少します。

これを試して：

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

それは、CSS セレクターで必要な階層の種類によって異なります。意味のあるクラス名を既に定義している場合は、型セレクターを含める必要はありません。ui-treenode-leafs を adivまたはli要素で実装するかどうかは問題ではありません。

.ui-chkbox特定のコンテキストで異なるスタイルが必要でない限り、スタイリング情報を追加するのに十分なはずです。しかし、それでも.ui-treenode-leaf .ui-chkbox必要なのはそれだけです。

も使用しないでください!important。を使用する必要がある場合はimportant、クラスについて、および (他の) セレクターがどの程度具体的であるかについて考える必要があります。

于 2013-05-08T18:39:11.297 に答える