CSS/HTML: ul: selector trống sẽ không phù hợp với một danh sách trống

Question

Tôi đã CSS và HTML code sau:

<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; 
} 

Các ul được phổ biến với các biểu tượng đối với một số hành động có thể được thực hiện. Tuy nhiên, ul không khớp với: bộ chọn trống khi trống và như vậy vẫn hiển thị; đường viền, đệm, bóng và tất cả.

[EDIT: Để làm rõ, tôi đang nói ở đây về thời điểm các phần tử chưa được thêm vào. Ngay cả khi không có gì bên trong, nó vẫn không khớp với: bộ chọn trống. ]

Tại sao lại như vậy?

Answer 1

Theo MDN

Các: trống pseudo-class đại diện cho bất kỳ yếu tố mà không có con cái gì cả. Chỉ các nút phần tử và văn bản (bao gồm khoảng trắng) được xem xét.

"Trống" ul của bạn có thể chứa nút văn bản khoảng trắng.