從零開始的前端生活-理解content(二)

應用

清除浮動

偽元素加content最常見的應用是清除浮動帶來的影響

.clear::after{
    content:'';
    display:table;
    clear:both;
}

字元內容的生成

content還可以插入Unicode字元(萬國碼)，例如content: '\A'; 就是換行的意思。案例如下，實現 “正在載入中...” ，三個點來回切換。

<div>
    正在載入中
    <dot>...</dot>
</div>

dot {
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}

dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}

@keyframes dot {
    33% {
        transform: translateY(-2em);
    }
    66% {
        transform: translateY(-1em);
    }
}

原理我覺得是這樣的

dot容器高為1em，如圖矩形所示，使用偽元素before是把原來html中的三個點擠出去。或者html裡面三個點都不用寫了，這樣用before和after都可以。然後使用overflow: hidden; 把超過容器部分的內容隱藏起來。/A是換行的意思。

圖片生成

div::before{
    content:url(1.jpg);
}

不過這種方式用的不多，主要是圖片的尺寸不好控制

attr 屬性值內容生成

獲取元素屬性的值

比如

<div class= "box"></div>

.box::before{
    content: attr(class);
}

結果將顯示box，出來原生的HTML屬性，還可以自定義的HTML屬性。註：不用括弧裡加引號

content計數器

我覺得這可以應用在列表新增或減去元素的計數功能，比如這樣的需求：左邊一個ul 購物車，當我們點擊一件商品加入購物車，購物車ul里要生成對應商品的li，並實現計數功能。js可以實現，不過css也可以實現。

先來看看計數器的兩個屬性和一個方法。

• counter-reset

  意思是：“計數器-重置”，格式是 counter-reset : count 1; 創建一個叫count的計數器，起始值為1，如果沒寫起始值預設為0. 當然也可以同時設置多個計數器，如 counter-reset : count1 2 count2 3; 用空格隔開就行。

• counter-increment

  意思是：“計數器遞增”，後面可以跟數字，表示每次計數的變化值，沒寫預設為1。

  遵循普照規則--普照源(counter-reset)唯一，每普照(counter-increment)一次，普照源增加一次計數值。下麵會用到

  格式如下：

  .counter{
      counter-reset: count 1;
      counter-increment: count;// 也可以普照多個計數器，用空格就行
  }
  .counter::before{
      content: counter(count);
  }
  

  <p class="counter"></p>
  

  當然counter-increment可以放在自身元素上，也可以在偽元素上。不過有時候效果不一樣，反正記住，普照一次，就increment一次。

• 方法 counter() / counters()

  content: counter(name);// name 是 計數器名字

  content: counter(name, style); style 的值就是 list-style-type 的那些值。

  .couter {
      font-size: 32px;
      color: red;
      counter-reset: zhangsan 2 lisi 3;
      counter-increment: zhangsan;
  }
  
  .couter::before {
      content: counter(lisi);
  }
  
  .couter::after {
      content: counter(zhangsan, square);
  }
  

  counter只能1、2、3、4，如果要實現1-1 , 1-2 , 2-1 這種分級效果，就可以使用counters()

  格式: content: counters( name , string);

  這個時候普照規則就很重要

  <div class="reset">
      <div class="counter">HTML
          <div class="reset">// 直接嵌套在裡面，遵循 一個容器里的普照源唯一的原則
              <div class="counter">div
                  <div class="reset">
                      <div class="counter">……</div>
                  </div>
              </div>
              <div class="counter">span</div>
          </div>
      </div>
      <div class="counter">CSS
          <div class="reset">
              <div class="counter">content</div>
              <div class="counter">color</div>
          </div>
      </div>
      <div class="counter">JS</div>
  </div>
  

  .reset {
      counter-reset: count 0;
      padding-left: 20px;
  }
  
  .counter::before {
      content: counters(count, '-') '. ';
      counter-increment: count;
  }
  

  

雖然看起來有點亂，仔細看一下就會發現，要實現嵌套，就得遵循普照源唯一，每次嵌套都得外麵包一層reset。

還可以counters(name , string , style);

大雜燴

content 內容生成語法是可以混合在一起使用的，比如

a::before{
   content: "(" attr(href) ")"; 
}

.counter::before {
    content: counters(count, '-') '. ';
    counter-increment: count;
}

不用 + 號字元串拼接

結語

讀張鑫旭老師的css世界記錄的筆記！