CSS基础知识点总结

content 用法

• 填入string类型 - 清除浮动

  .clearfix:after{
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden
    }
  

• 填入url() - 插入图片

  <div class="logo">Google</div>
  
  .logo:before{
        content:url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png);
    }
  

• 填入attr - 文字投影和半边效果

  <p><span data-text='半'>半</span><span data-text='边'>边</span>
  <span data-text='效'>效</span><span data-text='果'>果</span></p>
  
  span{ 
        font-size: 100px;
        font-weight: bold;
        position: relative;
        color: #000;
    }
  span:before{
        content: attr(data-text);
        color: green
        position: absolute;
        left: 12px;
        top: -6px;
        width: 50%;
        overflow: hidden;
    }
  

• counter[s] - 计数器

  <strong>请选择你所使用的技术：</strong>
  <ol>
        <li><input type="checkbox" id="item1"><label for="item1">PHP</label></li>
        <li><input type="checkbox" id="item2"><label for="item2">Javascript</label></li>
        <li><input type="checkbox" id="item3"><label for="item3">Java</label></li>
        <li><input type="checkbox" id="item4"><label for="item4">HTML</label></li>
        <li><input type="checkbox" id="item5"><label for="item5">CSS</label></li>
        <li><input type="checkbox" id="item6"><label for="item6">nodejs</label></li>
        <li><input type="checkbox" id="item7"><label for="item7">go</label></li>
  </ol>
    总共选择了 <strong class="total"></strong> 项！
  
  ol{
    counter-reset: n;
     }
  
  input:checked {
        counter-increment: n;
  }
  
  .total:after {
        content: counter(n);
    }