CSS中需要明白的 content 屬性

如果你是一個前端開發者,可能知道有一些很好的偽類的改變,比如CSS content屬性.如果不熟悉這些概念的,可能需要去復習一篇了.

在這篇文章中.我們主要是看 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, 2015<p>

下面是CSS代碼:

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

這里在列表項中插入一個文本內容,且同樣在P標簽中插入一個編碼字符.

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

值: <uri>

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

HTML:

<a class="sp" >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 函數就是插入一個指定的屬性值,他僅有一個參數.如果元素沒有屬性,返回一個空字符.

下面一個例子:

<ul>
  <li><a >HTML and CSS</a></li>
  <li><a >JavaScript</a></li>
  <li><a >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".這就完成了我們想要的結果.

后期我們會將部分屬性做一些詳細講解.請留意!

本文屬于吳統威的博客, 微信公眾號:bianchengderen,QQ群:186659233 的原創文章,轉載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=180 ,歡迎大家傳播與分享.