詳解 CSS的 content 屬性

在前端開發中，css是我們必定會使用到的語言，本文我們主要和大家一起學習 content屬性. CSS的 content 屬性需要在 ::before和::after 偽類元素中使用. 屬性會在頁面上產生content中的內容,當然需要您的瀏覽器支援這個屬性.

content 屬性的基本文法.

content 屬性的表現形式就如下所寫,這裡列出了每一個屬性的值.

p::before {  content: normal|counter|attr|string|open-quote|url|initial|inherit;}

這個與CSS中的稍有不同,例如在::before或者::after中使用 attr(),你需要寫如下方式的代碼:

p::after {  content: " (" attr(title) ")";}

這裡只是一個例子,更多的在後面.下面我們將討論每一個值,包含attr().

值: none 或者 normal

當設定為none,這個虛擬元素不會產生.如果設定為normal,他將計算到none.

p::before {  content: normal;}p::after {  content: none;}

這種事情,可能用於嵌套元素中,他們已經有了一個虛擬元素的定義,但是在某些情況下,你想覆蓋他們.

值: <string>

content可以設定為一個字串,任何的字元內容.如果使用不是拉丁字元的,這個字元必須得編碼.我們看下面的自理,考慮這個HTML.

<h2>Tutorial Categories</h2><ol>  <li>HTML and CSS</li>  <li class="new">Sass & Less</li>  <li>JavaScript</li></ol><p class="copyright">SitePoint, 2017<p>

下面是CSS代碼:

.new::after {  content: " New!";  color: green;}.copyright::before {  content: "\00a9  ";}

這裡在清單項目中插入一個常值內容,且同樣在P標籤中插入一個編碼字元.

一個字串必須有單引號或者雙引號包含起來.

值: <uri>

如果你想顯示一些媒體檔案,這時候 <uri>就可以派上用場了.你可以指向一個外部資源(比片).如果一些資源或者圖片不顯示,他會忽略或者有一個預留位置. 那看下面的代碼,如何使用他們.

HTML:

<a class="sp" href="http://www.sitepoint.com/">SitePoint</a>

CSS:

.sp::before {  content: url(http://www.sitepoint.com/favicon.ico);}

值: counter() or counters()

這個值大部分用於複合值.他可以是兩個不同函數中的一個-- counter() 或者 counters().

下面我們通過一個例子來看看counter:

<h2>Name of First Four Planets</h2><p class="planets">Mercury</p><p class="planets">Venus</p><p class="planets">Earth</p><p class="planets">Mars</p>

CSS:

.planets {  counter-increment: planetIndex;}.planets::before {  content: counter(planetIndex) ". ";}

這個數字將會在p標籤中顯示.類似一個排序列表. 這個例子中,我們可以很簡單的使用一個排序列表. 這裡我們不做詳細講解.後期我會出一篇詳細的文章來講解這兩個函數.

值: attr()

從字面量來看,attr 函數就是插入一個指定的屬性值,他僅有一個參數.如果元素沒有屬性,返回一個Null 字元.

下面一個例子:

<ul>  <li><a href="http://www.sitepoint.com/html-css/">HTML and CSS</a></li>  <li><a href="http://www.sitepoint.com/javascript">JavaScript</a></li>  <li><a href="http://www.sitepoint.com/mobile/">Mobile</a></li></ul>

通過上面的HTML,在結合下面的CSS的屬性設定為href,這時候連結文字後面將會加入他自身的連結文本.

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

值: open-quote 或者close-quote

當我們設定為這個值,content屬性會產生一個引號標記.它通常與<q>標籤元素一起使用.但是你可以用在任何元素上.因此你可以做一些相關事情,例如下面:

blockquote::before {  content: open-quote;}blockquote::after {  content: close-quote;}

這 close-quote 值僅在 ::after 虛擬元素中有效, 如果值 open-quote沒有被設定在同樣的元素的虛擬元素::before上,他也不會有任何效果.

值: no-open-quote or no-close-quote

no-open-quote值移除開始的引號,no-close-quote 移除結束的引號. 你可能非常想知道他們有什麼用呢.看下面的HTML代碼:

<p>    <q>A wise man once said:       <q>        Be true to yourself, but don't listen to those who say         <q>          Don't be true to yourself.        </q>      </q>       That is good advice.    </q></p>

注意上面的段落,講話人引入了 (“A wise man…”)說話人,依次,也引入了另外的說話人("those who say..."). 因此我們 引入進行了三次嵌套. 從文法上講,這是一個正確的處理方式.如果要使用產生的內容,我們得確保引入嵌套的正確:

q {  quotes: '“' '”' '‘' '’' '“' '”';}q::before {   content: open-quote;}q::after {  content: close-quote;}

第一個選取器定義了我們要用到的一些引號.使用quotes屬性設定三個值. 然後我們插入引號作為內容使用.這就類似於上面一節講到的那樣.

但是如果我們想第二個引號被忽略或者不插入,那怎麼辦? 我們可以使用 no-open-quote 和 no-close-quote值來覆蓋他們.

.noquotes::before {  content: no-open-quote;}.noquotes::after {  content: no-close-quote;}

第二個不需要引號的,就將第二個q加入class = "noquotes".這就完成了我們想要的結果.

以上內容就是CSS的 content 屬性詳細介紹，希望能協助到大家。