พิวโดคลาส empty

พิวโดคลาส empty กำหนดลักษณะที่ปรากฏของ องค์ประกอบว่างเปล่า (ที่ไม่ประกอบด้วยข้อความ)

ไวยากรณ์

cssตัวเลือก:empty {
  
}

ตัวอย่าง

ในตัวอย่างนี้ li สุดท้ายว่างเปล่า, แต่ยังคงมีมาร์กเกอร์อยู่:

html<ul>
  <li>รายการในลิสต์</li>
  <li>รายการในลิสต์</li>
  <li>รายการในลิสต์</li>
  <li>รายการในลิสต์</li>
  <li></li>
</ul>

Результат:

ตัวอย่าง

มาเปลี่ยนพฤติกรรมสำหรับแท็ก li ที่ว่างเปล่ากัน:

html<ul>
  <li>รายการในลิสต์</li>
  <li>รายการในลิสต์</li>
  <li>รายการในลิสต์</li>
  <li>รายการในลิสต์</li>
  <li></li>
</ul>

cssli:empty {
  border: 1px solid blue;
  list-style-type: circle;
  color: blue;
  width: 100px;
}

Результат:

ตัวอย่าง

ซ่อน li ที่ว่างเปล่าทั้งหมด:

html<ul>
  <li>รายการในลิสต์</li>
  <li>รายการในลิสต์</li>
  <li>รายการในลิสต์</li>
  <li>รายการในลิสต์</li>
  <li></li>
</ul>

cssli:empty {
  display: none;
}

Результат:

ดูเพิ่มเติม