Css之圆形镂空（父子关系实现）

section:nth-child(5) {
      .out {
        position: relative;
        display: inline-block;
        width: 0.12rem;
        height: 0.12rem;
        margin-left: 0.2rem;
        margin-right: 0.24rem;
        border: 0.01rem solid #5aa2d9;
        border-radius: 50%;
        background: #fff;

        .in {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          display: inline-block;
          margin: auto;
          width: 0.06rem;
          height: 0.06rem;
          border: 0.01rem solid #5aa2d9;
          border-radius: 50%;
        }
      }
    }

 <section>
   <i class="out"><i class="in"></i></i><span>居民点</span>
 </section>