13

次の CSS と HTML コードがあります。

<ul id="actions" class="frame frame-yellowglow">
</ul>

CSS

ul#actions {
    clear: left;    
    width: calc(60% - 2px);
    margin: 5px auto;
    padding: 10px 0px;
    text-align: center;
}
ul#actions:empty {
    margin: 0;
    padding: 0;
}
ul#actions li {
    display: inline;
    margin: 0px 3px;
}
.frame {
    border-radius: 5px; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px #dddddd solid;
}
.frame:empty {
    border: none;
    box-shadow: none;
}
.frame-yellowglow {
    border: 1px #D4B700 solid;
    box-shadow: 0 0 4px #D4B700;
}

にはul、実行できる特定のアクションのアイコンが表示されます。ただし、ul空の場合は :empty セレクターと一致せず、そのままレンダリングされます。ボーダー、パディング、シャドウ、およびすべて。

[編集: 明確にするために、ここでは要素がまだ追加されていない場合について話しています。中に何もない場合でも、 :empty セレクターと一致しません。]

これはなぜですか？

4

1 に答える 1

20

MDNによると

:empty 疑似クラスは、子をまったく持たない要素を表します。要素ノードとテキスト (空白を含む) のみが考慮されます。

あなたの「空」ulにはおそらく空白のテキストノードが含まれています。

于 2013-06-09T20:58:45.340 に答える