【CSS系列】被忽略的content屬性

CSS的 content 屬性，你們應該都不陌生，不少時候咱們都使用過，通常狀況下你看到最多的用法無外乎這樣兩種：一種用於清除浮動，一種用於咱們常用的字體圖標。

.clear:after {
  content: "";
  display: block;
  clear: both;
}

.icon:before {
  content: "\e778";
}
複製代碼

大多數都會停留這個階段，不多會探索更多的用法，甚至有些人認爲它的用法也就這麼多。

不過當你看到這篇文章時，會發現這是一種多麼錯誤的想法。你會發現原來還有這麼多，被你忽略並且好用的功能。

接下來就讓咱們一塊兒見識見識它的更多用法。

介紹

首先咱們先來看看 MDN 上對 content 是如何描述的。

CSS 的 content 屬性用於在元素的 ::before 和 ::after 僞元素中插入內容。使用 content 屬性插入的內容都是匿名的可替換元素。

從上面看到它只能用於「僞元素」中，但其實它在 chrome 瀏覽器中，可用於任何元素，這個可能不少人都不知道，不信你能夠看下面這個例子。

<template>
  <div class="box"></div>
</template>
<style>
.box {
  content: url(https://user-gold-cdn.xitu.io/2019/4/28/16a62ff6286b1dff?w=300&h=200&f=jpeg&s=13642);
}
</style>
複製代碼

不過除了chrome瀏覽器，其它瀏覽器並不支持直接在元素上使用，只能用在「僞元素」上。因此使用場景並很少。

你已經看到 content 的值能夠爲字符與 url。那它還可使用那些值呢？讓咱們一一來看。

屬性值

1.String

指定的文本值。字符串是最多見的用法，好比上面說的字體圖標。不過你還能夠作的更多。

<template>
<div>
  <form class="form">
    <label>用戶名</label><input type="text" />
    <label>手機號</label><input type="text" />
    <label>郵箱</label><input type="text" />
  </form>
</div>
</template>
<style>
.form label:before {
  content: "*";
  color: red;
}
</style>
複製代碼

Q：是否是發現了新大陸？

A：是

Q：登哥，你是如何看待別人都說你很帥的？

A：我這該死的，無處安放的魅力

<template>
  <p class="question">是否是發現了新大陸？</p>
  <p class="answer">是</p>
  <p class="question">登哥，你是如何看待別人都說你很帥的？</p>
  <p class="answer">我這該死的，無處安放的魅力</p>
</template>
<style>
.question:before {
  content: "Q：";
}
.answer:before {
  content: "A：";
}
</style>
複製代碼

2.url

值能夠爲：圖像，聲音，視頻等內容。

一般你想在網頁中顯示一張圖片，通常是兩種方式：使用<img>或者使用 background-image。

除此以外，你還能夠利用 content 屬性，它的值能夠是圖片的地址。

好比下面這種方式：

<template>
  <div class="image"></div>
</template>
<style>
.image:before {
  content: url(https://user-gold-cdn.xitu.io/2019/4/28/16a62ff6286b1dff?w=300&h=200&f=jpeg&s=13642);
}
</style>
複製代碼

不過以這種方式插入時沒法更改圖像的尺寸。因此咱們不多這麼使用，不過有個場景是比較適合這種方式它能夠很容易實現一個圖片的切換。好比下面這個例子。

<template>
<img class="img-item" src="/head.png">
</template>
<style>
.img-item {
  width: 200px;
}
.img-item:hover {
  content: url(/gonghao.jpg);
}
</style>
複製代碼

雖然效果上把圖片替換，其實若是細心的你，打開控制檯會發現它的 src 值是沒有改變的。也就是說它修改的是咱們的視覺效果而已。

3.attr

能夠用它獲取 HTML 屬性的值。

年齡：18

<template>
  <label class="label" data-label="年齡">18</label>
</template>
<style>
.label:before {
  content: attr(data-label) ": ";
}
</style>
複製代碼

4.counter（計數器）

這個就比較厲害了，是一個很是強大的功能，如何強大的呢？接下來咱們就來看看。一般你要實現一個動態的遞增數，都是經過 JavaScript 實現，你可能都沒有想過 CSS 也是能夠實現遞增數。

這個牛逼的東西就是「計數器」。

先來看看什麼叫計數器：

本質上 CSS 計數器是由 CSS 維護的變量，這些變量可能根據 CSS 規則增長以跟蹤使用次數。

計數器的值經過使用 counter-reset 和 counter-increment 操做，而後經過 counter() 或 counters()函數來顯示在頁面上。

光說不練假把式，來看看如何使用它。

首先，使用前必需要經過 counter-reset 重置一個初始值。它默認是 0。你也能夠指定初始值。

counter-reset: record; /* 重置計數器爲 0 */
counter-reset: record 2; /* 重置計數器爲 2 */
複製代碼

除此以外，它的值還能夠是多個。

24

<template>
  <h3></h3>
</template>
<style>
h3 {
  counter-reset: first 2 second 4;
}
h3:before {
  content: counter(first) counter(second);
}
</style>
複製代碼

利用計數器咱們很容易實現這種有序列表的效果。

<template>
  <div class="page-list">
    <p>你瞧，我這該死的，無處安放的魅力</p>
    <p>你瞧，我這該死的，無處安放的魅力</p>
    <p>你瞧，我這該死的，無處安放的魅力</p>
  </div>
</template>
<style>
.page-list {
  counter-reset: counter;
}
.page-list p:before {
  padding: 2px 8px;
  border: 1px solid  #ccc;
  counter-increment: counter;
  content: counter(counter);
}
</style>
複製代碼

少俠且慢，你覺得到這裏就結束了嗎？counter() 函數能夠接受兩個參數。

counter(name, list-style-type)
複製代碼

list-style-type 的值能夠爲：disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none | inherit

因此咱們能夠把上面的一個案例改爲這樣。若是你感興趣，你能夠這些值都玩一遍。

content: counter(counter, upper-roman);
複製代碼

上面咱們提到，除了 counter() 以外還有一個 counters()，那它是作什麼的呢？

counters() 對嵌套的計數器很是有用，它能夠在不一樣級別的嵌套計數器之間插入字符串。

好比：咱們生成一個目錄結構。

<template>
  <ol class="list">
  <li>item</li>
  <li>item
    <ol class="list">
      <li>item</li>
      <li>item</li>
      <li>item
        <ol class="list">
          <li>item</li>
          <li>item</li>
        </ol>
      </li>
      <li>item</li> 
    </ol>
  </li>
  <li>item</li>
</ol>
</template>
<style>
.list {
  counter-reset: section;
  list-style-type: none;
}
.list li:before {
  counter-increment: section;
  content: counters(section, "-") ".";
}
</style>
複製代碼

好了到這裏本篇文章結束了，今天說了不少好用的方法，並且是常常容易忽略的甚至是沒有使用過的。經過今天的文章我相信你們應該對 content 屬性有了更多的瞭解。

不過有一點須要注意，content還有其它的屬性，不過我認爲其它屬性和這幾個比起來，就顯比較不實用了，若是你對其感興趣，不防本身研究下。

若是你沒有看過癮，更多幹貨文章，在個人公衆號：六小登登。

這裏有個人更多故事，歡迎來與我一塊兒交流。

以爲文章不錯對你有所啓發，點贊是一種態度也是一種承認。

參考：

《css世界》

Using CSS counters