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

六小登登發表於2019-04-28
CSS

CSS的 content 屬性，大家應該都不陌生，很多時候我們都使用過，一般情況下你看到最多的用法無外乎這樣兩種：一種用於清除浮動，一種用於我們經常使用的字型圖示。

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

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

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

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

接下來就讓我們一起見識見識它的更多用法。

介紹

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

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

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

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

<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

指定的文字值。字串是最常見的用法，比如上面說的字型圖示。不過你還可以做的更多。

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

<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>
複製程式碼

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

2.url

值可以為：影像，聲音，視訊等內容。

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

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

比如下面這種方式：

【CSS系列】被忽略的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>
複製程式碼

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

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

<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

所以我們可以把上面的一個案例改成這樣。如果你感興趣，你可以這些值都玩一遍。

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

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

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

counters() 對巢狀的計數器非常有用，它可以在不同級別的巢狀計數器之間插入字串。

比如：我們生成一個目錄結構。

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

<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系列】被忽略的content屬性

參考：

《css世界》

Using CSS counters

相關文章