如何从多个盒子中找出空盒子

题目:20个div有一个div里面没有内容,如何用css选择器快速找出这个盒子?

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div></div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>

如上代码需要快速选出空的div我们可以使用css中:empty选择器

定义和用法:

:empty 选择器匹配没有子元素（包括文本节点）的每个元素

div{
  width: 500px;
  height: 20px;
  background-color: #ccc;
  margin-top: 20px;
}
div:empty{
  background-color: #000;
}

结果如下: