這篇文章主要介紹了CSS偽元素和Content屬性的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)江夏免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

初識(shí)偽元素

?說(shuō)起偽元素我第一想到的莫過(guò)于::before和::after這兩個(gè)了，它倆其實(shí)就是在其附屬的選擇器命中的元素上插入第一個(gè)子節(jié)點(diǎn)和追加最后一個(gè)子節(jié)點(diǎn)。那這時(shí)我不禁地想問(wèn)：“直接添加兩個(gè)class為.before和.after不是一樣的嗎？”
其實(shí)使用偽元素::before和::after以下兩個(gè)好處：

1. HTML的代碼量減少，對(duì)SEO有幫助；

2. 提高JavaScript查詢?cè)氐男省?/p>

?那為什么會(huì)這兩好處呢？原因就是偽元素并不存在于DOM中，而是位于CSSOM，HTML代碼和DOM Tree中均沒(méi)有它的身影，量少了自然效率有所提升。但這也引入一個(gè)問(wèn)題——我們沒(méi)辦法通過(guò)JavaScript完全操控偽元素（我將在下面一節(jié)為大家講述）

一大波偽元素來(lái)了

除了::before和::after外，別漏了以下的哦！

:first-line：只能用于塊級(jí)元素。用于設(shè)置附屬元素的第一個(gè)行內(nèi)容的樣式。可用的CSS屬性為font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear。

:first-letter：只能用于塊級(jí)元素。用于設(shè)置附屬元素的第一個(gè)字母的樣式。可用的CSS屬性為font,color,background,marin,padding,border,text-decoration,vertical-align,text-transform,line-height,float,clear。

::selection：匹配選中部分的內(nèi)容?？捎玫腃SS屬性為background,color。

有沒(méi)有發(fā)現(xiàn)有的偽元素前綴是:有的卻是::呢？::是CSS3的寫(xiě)法，其實(shí)除了::selection外，其他偽元素既兩種前綴都是可以的，為兼容性可選擇使用:，為容易區(qū)分偽元素和偽類則使用::，但我還是建議使用::來(lái)提高可讀性，兼容性就讓postcss等工具幫我們處理就好了。

::before和::after的注意事項(xiàng)

默認(rèn)display: inline；

必須設(shè)置content屬性，否則一切都是無(wú)用功；

默認(rèn)user-select: none，就是::before和::after的內(nèi)容無(wú)法被用戶選中的；

偽元素和偽類結(jié)合使用形如：.target:hover::after。

JavaScript操作偽元素

?上文提到由于偽元素僅位于CSSOM中，因此我們僅能通過(guò)操作CSSOM API——window.getComputedStyle來(lái)讀取偽元素的樣式信息，注意：我們能做的就是讀取，無(wú)法設(shè)置的哦！

{- window.getComputedStyle的類型 -}
data PseudoElement = ":before" | "::before" | ":after" | "::after" | ":first-line" | "::first-line" | ":first-letter" | "::first-letter" | "::selection" | ":backdrop" | "::backdrop" | Null

window.getComputedStyle :: HTMLElement -> PesudoElement -> CSSStyleDeclaration

{- CSSStyleDeclaration實(shí)例的方法 -}
data CSSPropertyName = "float" | "backround-color" | ......
data DOMPropertyName = "cssFloat" | "styleFloat" | "backgroundColor" | ......

-- IE9+的方法
CSSStyleDeclaration#getPropertyValue :: CSSPropertyName -> *
-- IE6~8的方法
CSSStyleDeclaration#getAttribute :: CSSPropertyName -> *
-- 鍵值對(duì)方式獲取
CSSStyleDeclaration#[DOMPropertyName] -> *

示例：

.target[title="hello world"]::after{
  display: inline-block;
  content: attr(title);
  background: red;
  text-decoration: underline;
}
const elTarget = document.querySelector(".target")
const computedStyle = window.getComputedStyle(elTarget, "::after")
const content = computedStyle.getPropertyValue("content")
const bg = computedStyle.getAttribute("backgroundColor")
const txtDecoration = computedStyle["text-decoration"]
console.log(content) // "hello world"
console.log(bg)      // red
console.log(txtDecoration) // underline

玩透Content屬性

?到這里我們已經(jīng)可以利用::before和::after實(shí)現(xiàn)tooltip等效果了，但其實(shí)更為強(qiáng)大的且更需花時(shí)間研究的才剛要開(kāi)始呢！那就是Content屬性，不僅僅可以簡(jiǎn)單直接地設(shè)置一個(gè)字符串作為偽元素的內(nèi)容，它還具備一定限度的編程能力，就如上面attr(title)那樣，以其附屬元素的title特性作為content值。下面請(qǐng)?jiān)试S我為大家介紹吧！

p::after{
    content: "普通字符串";
    content: attr(父元素的html屬性名稱);
    content: url(圖片、音頻、視頻等資源的url);
    /* 使用unicode字符集，采用4位16進(jìn)制編碼
     * 但不同的瀏覽器顯示存在差異，而且移動(dòng)端識(shí)別度更差
     */
    content: "\21e0";
    /* content的多個(gè)值可以任意組合，各部分通過(guò)空格分隔 */
    content: "'" attr(title) "'";
    
    /* 自增計(jì)數(shù)器，用于插入數(shù)字/字母/羅馬數(shù)字編號(hào)
     * counter-reset: [ ?]+，必選，用于標(biāo)識(shí)自增計(jì)數(shù)器的作用范圍，為自定義名稱，為起始編號(hào)默認(rèn)為0。
     * counter-increment: [ ?]+，用于標(biāo)識(shí)計(jì)數(shù)器與實(shí)際關(guān)聯(lián)的范圍，為counter-reset中的自定義名稱，為步長(zhǎng)默認(rèn)為1。
     * : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha
     */
    content: counter(, );
    
    /* 以父附屬元素的qutoes值作為content的值
     */
    content: open-quote | close-quote | no-open-quote | no-close-quote;
}

換行符：HTML實(shí)體為 ，CSS為\A，JS為\uA。

?可以看到Content接受6種類型，和一種組合方式。其中最后兩種比較復(fù)雜，我們后面逐一說(shuō)明。

自定義計(jì)數(shù)器

?HTML為我們提供ul或ol和li來(lái)實(shí)現(xiàn)列表，但如果我們希望實(shí)現(xiàn)更為可性化的列表，那么該如何處理呢？content屬性的counter類型值就能幫到我們。

.dl
 .dt{chapter1}
 .dd{text11}
 .dd{text12}
 .dt{chapter2}
 .dd{text21}
 
/* CSS部分 */
.dl {
  counter-reset: dt 0; /* 表示解析到.dl時(shí)，重置dt計(jì)數(shù)器為0 */
  
  & .dt {
    counter-reset: dd 0; /* 表示解析到.dt時(shí)，重置dd計(jì)數(shù)器為0 */
    
    &::before{
        counter-increment: dt 1; /* 表示解析到.dt時(shí)，dt計(jì)數(shù)器自增1 */
        content: counter(dt, lower-roman) " ";
    }
  }
  
  & .dd::before {
    counter-increment: dd 1; /* 表示解析到.dd時(shí)，dd計(jì)數(shù)器自增1 */
    content: counter(dd) " ";
  }
}

通過(guò)counter-reset來(lái)定義和重置計(jì)數(shù)器，通過(guò)counter-increment來(lái)增加計(jì)數(shù)器的值，然后通過(guò)counter來(lái)決定使用哪個(gè)計(jì)數(shù)器，并指定使用哪種樣式。
如果用JavaScript來(lái)表示應(yīng)該是這樣的

const globalCounters = {"__temp":{}}

function resetCounter(name, value){
  globalCounters[name] = value
}
function incrementCounter(name, step){
  const oVal = globalCounters[name]
  if (oVal){
    globalCounters[name] = oVal + step
  }
  else{
    globalCounters.__temp[name] = step
  }
}
function counter(name, style){
    return globalCounters[name] || globalCounters.__temp[name]
}

function applyCSS(mount){
    const clz = mount.className
    if (clz == "dl"){
        resetCounter("dt", 0)
        const children = mount.children
        for (let i = 0; i < children.length; ++i){
          applyCSS(children[i])
        }
    }
    else if (clz == "dt"){
        resetCounter("dd", 0)
        incrementCounter("dt", 1)
        const elAsBefore = document.createElement("span")
        elAsBefore.textContent = counter("dt", "lower-roman") + " "
        mount.insertBefore(mount.firstChild)
    }
    else if (clz == "dd"){
        incrementCounter("dd", 1)
        const elAsBefore = document.createElement("span")
        elAsBefore.textContent = counter("dd", "lower-roman") + " "
        mount.insertBefore(mount.firstChild)
    }
}

嵌套計(jì)數(shù)器

?對(duì)于多層嵌套計(jì)數(shù)器我們可以使用counters(, , ?)

.ol
  .li
    .ol
      .li{a}
      .li
  .li
    .ol
      .li{c}

.ol {
    counter-reset: ol;
    & .li::before {
        counter-increment: ol;
        content: counters(ol, ".");
    }
}

Content的限制

IE8+才支持Content屬性；

除了Opera9.5+中所有元素均支持外，其他瀏覽器僅能用于:before,:after內(nèi)使用；

無(wú)法通過(guò)JS獲取Counter和Counters的運(yùn)算結(jié)果。得到的就只能是"counter(mycouonter) \" \""。

自定義引號(hào)

?引號(hào)這個(gè)平時(shí)很少在意的符號(hào)，其實(shí)在不同的文化中使用的引號(hào)將不盡相同，如簡(jiǎn)體中文地區(qū)使用的""，而日本則使用「」。那我們根據(jù)需求自定義引號(hào)呢？答案是肯定的。
通過(guò)open-quote,close-quote,no-open-quote和no-close-quote即可實(shí)現(xiàn)，下面我們通過(guò)例子來(lái)理解。
會(huì)根據(jù)父元素的lang屬性自動(dòng)創(chuàng)建::before和::after來(lái)實(shí)現(xiàn)插入quotation marks。

p[lang=en]>q{英語(yǔ)}
p[lang=no]>q{挪威語(yǔ)}
p[lang=zh]>q{漢語(yǔ)}
p[lang=en]>q.no-quote{英語(yǔ)2}
div[lang=no]>.quote{挪威語(yǔ)2}

CSS片段：

p[lang=en] > q{
  quotes: ""; /* 定義引號(hào) */
}
p[lang=en] > q.no-quote::before{
  content: no-open-quote;
  /*或者 content: none;*/
}
div[lang=no] > .quote {
  quotes: "<<-" "->>";
}
div[lang=no] > .quote::before {
  content: open-quote;
}
div[lang=no] > .quote::after {
  content: close-quote;
}

示例

分割線

p.sep{or}

.sep {
  position: relative;
  text-align: center;
  
  &::before,
  &::after {
    content: "";
    box-sizing: border-box;
    height: 1px;
    width: 50%;
    border-left: 3em solid transparent;
    border-right: 3em solid transparent;
    position: absolute;
    top: 50%;
  }
  
  &::before {
    left: 0;
  }
  
  &::after {
    right: 0;
  }
}

只讀效果(通過(guò)遮罩原來(lái)的元素實(shí)現(xiàn))

.input-group {
  position: relative;
  
  &.readonly::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}

計(jì)數(shù)器

.selections>input[type=checkbox]{option1}+input[type=checkbox]{option2}
.selection-count

.selections{
  counter-reset: selection-count;
  
  & input:checked {
    counter-increment: selection-count;
  }
}
.selection-count::before {
  content: counter(selection-count);
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS偽元素和Content屬性的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!