: bộ chọn trống không hoạt động trong css

Question

tôi đã sử dụng bộ chọn :empty trong lớp .error. vấn đề là ngay cả khi không có nội dung bên trong div với lớp lỗi, lớp lỗi sẽ không bị xóa hoàn toàn. khi tôi thử nghiệm trong firebug, tôi thấy rằng div vẫn còn có một số khoảng trắng và khi tôi loại bỏ không gian thêm, div sau đó biến mất.

.error{ border:solid 1px #ff0000; color:#ff0000;} 
.error:empty{ display:none;} 

div lãm như thế này trên gỡ rối:

<div class="error">  </div> 

mà thêm dấu cách bạn nhìn thấy là vấn đề. Có cách nào tôi có thể hiển thị   trong css để hiển thị: không? xin giúp đỡ.

Answer 1

đó là vì <div class="error"> </div> (demo) không trống, nút này có nút văn bản là con.

:empty

Các: trống pseudo-class đại diện cho bất kỳ yếu tố mà không có trẻ em tại tất cả. Chỉ các nút phần tử và văn bản (bao gồm khoảng trắng) mới được xem là . Nhận xét hoặc hướng dẫn xử lý không ảnh hưởng đến việc liệu một yếu tố có được coi là trống hay không.

Hãy thử

<div class="error"></div> 

Demo: Fiddle