CSS偽元素和Content屬性怎么用

這篇文章主要為大家展示了“CSS偽元素和Content屬性怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS偽元素和Content屬性怎么用”這篇文章吧。

    初識偽元素

    說起偽元素我第一想到的莫過于::before和::after這兩個了，它倆其實就是在其附屬的選擇器命中的元素上插入第一個子節點和追加最后一個子節點。那這時我不禁地想問：“直接添加兩個class為.before和.after不是一樣的嗎？”

    其實使用偽元素::before和::after以下兩個好處：

    HTML的代碼量減少，對SEO有幫助；

    提高JavaScript查詢元素的效率。

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

    一大波偽元素來了

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

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

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

    ::selection：匹配選中部分的內容。可用的CSS屬性為background,color。

    有沒有發現有的偽元素前綴是:有的卻是::呢？::是CSS3的寫法，其實除了::selection外，其他偽元素既兩種前綴都是可以的，為兼容性可選擇使用:，為容易區分偽元素和偽類則使用::，但我還是建議使用::來提高可讀性，兼容性就讓postcss等工具幫我們處理就好了。

    ::before和::after的注意事項

    默認display:inline；

    必須設置content屬性，否則一切都是無用功；

    默認user-select:none，就是::before和::after的內容無法被用戶選中的；

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

    JavaScript操作偽元素

    上文提到由于偽元素僅位于CSSOM中，因此我們僅能通過操作CSSOMAPI——window.getComputedStyle來讀取偽元素的樣式信息，注意：我們能做的就是讀取，無法設置的哦！

    {-window.getComputedStyle的類型-}

    dataPseudoElement=":before"|"::before"|":after"|"::after"|":first-line"|"::first-line"|":first-letter"|"::first-letter"|"::selection"|":backdrop"|"::backdrop"|Null

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

    {-CSSStyleDeclaration實例的方法-}

    dataCSSPropertyName="float"|"backround-color"|......

    dataDOMPropertyName="cssFloat"|"styleFloat"|"backgroundColor"|......

    --IE9+的方法

    CSSStyleDeclaration#getPropertyValue::CSSPropertyName->*

    --IE6~8的方法

    CSSStyleDeclaration#getAttribute::CSSPropertyName->*

    --鍵值對方式獲取

    CSSStyleDeclaration#[DOMPropertyName]->*

    示例：

    .target[title="helloworld"]::after{

    display:inline-block;

    content:attr(title);

    background:red;

    text-decoration:underline;

    }

    constelTarget=document.querySelector(".target")

    constcomputedStyle=window.getComputedStyle(elTarget,"::after")

    constcontent=computedStyle.getPropertyValue("content")

    constbg=computedStyle.getAttribute("backgroundColor")

    consttxtDecoration=computedStyle["text-decoration"]

    console.log(content)//"helloworld"

    console.log(bg)//red

    console.log(txtDecoration)//underline

    玩透Content屬性

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

    p::after{

    content:"普通字符串";

    content:attr(父元素的html屬性名稱);

    content:url(圖片、音頻、視頻等資源的url);

    /*使用unicode字符集，采用4位16進制編碼

    *但不同的瀏覽器顯示存在差異，而且移動端識別度更差

    */

    content:"\21e0";

    /*content的多個值可以任意組合，各部分通過空格分隔*/

    content:"'"attr(title)"'";

    /*自增計數器，用于插入數字/字母/羅馬數字編號

    *counter-reset:[<identifier><integer>?]+，必選，用于標識自增計數器的作用范圍，<identifier>為自定義名稱，<integer>為起始編號默認為0。

    *counter-increment:[<identifier><integer>?]+，用于標識計數器與實際關聯的范圍，<identifier>為counter-reset中的自定義名稱，<integer>為步長默認為1。

    *<list-style-type>: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(<identifier>,<list-style-type>);

    /*以父附屬元素的qutoes值作為content的值

    */

    content:open-quote|close-quote|no-open-quote|no-close-quote;

    }

    換行符：HTML實體為&#010，CSS為\A，JS為\uA。

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

    自定義計數器

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

    <!--HTML部分-->

    .dl

    .dt{chapter1}

    .dd{text11}

    .dd{text12}

    .dt{chapter2}

    .dd{text21}

    /*CSS部分*/

    .dl{

    counter-reset:dt0;/*表示解析到.dl時，重置dt計數器為0*/

    &.dt{

    counter-reset:dd0;/*表示解析到.dt時，重置dd計數器為0*/

    &::before{

    counter-increment:dt1;/*表示解析到.dt時，dt計數器自增1*/

    content:counter(dt,lower-roman)"";

    }

    }

    &.dd::before{

    counter-increment:dd1;/*表示解析到.dd時，dd計數器自增1*/

    content:counter(dd)"";

    }

    }

    87877522-5ba0ab31a71d7_articlex.png

    通過counter-reset來定義和重置計數器，通過counter-increment來增加計數器的值，然后通過counter來決定使用哪個計數器，并指定使用哪種樣式。

    如果用JavaScript來表示應該是這樣的

    constglobalCounters={"__temp":{}}

    functionresetCounter(name,value){

    globalCounters[name]=value

    }

    functionincrementCounter(name,step){

    constoVal=globalCounters[name]

    if(oVal){

    globalCounters[name]=oVal+step

    }

    else{

    globalCounters.__temp[name]=step

    }

    }

    functioncounter(name,style){

    returnglobalCounters[name]||globalCounters.__temp[name]

    }

    functionapplyCSS(mount){

    constclz=mount.className

    if(clz=="dl"){

    resetCounter("dt",0)

    constchildren=mount.children

    for(leti=0;i<children.length;++i){

    applyCSS(children[i])

    }

    }

    elseif(clz=="dt"){

    resetCounter("dd",0)

    incrementCounter("dt",1)

    constelAsBefore=document.createElement("span")

    elAsBefore.textContent=counter("dt","lower-roman")+""

    mount.insertBefore(mount.firstChild)

    }

    elseif(clz=="dd"){

    incrementCounter("dd",1)

    constelAsBefore=document.createElement("span")

    elAsBefore.textContent=counter("dd","lower-roman")+""

    mount.insertBefore(mount.firstChild)

    }

    }

    嵌套計數器

    對于多層嵌套計數器我們可以使用counters(<identifier>,<separator>,<list-style-type>?)

    .ol

    .li

    .ol

    .li{a}

    .li{b}

    .li

    .ol

    .li{c}

    .ol{

    counter-reset:ol;

    &.li::before{

    counter-increment:ol;

    content:counters(ol,".");

    }

    }

    Content的限制

    IE8+才支持Content屬性；

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

    無法通過JS獲取Counter和Counters的運算結果。得到的就只能是"counter(mycouonter)\"\""。

    自定義引號

    引號這個平時很少在意的符號，其實在不同的文化中使用的引號將不盡相同，如簡體中文地區使用的""，而日本則使用「」。那我們根據需求自定義引號呢？答案是肯定的。

    通過open-quote,close-quote,no-open-quote和no-close-quote即可實現，下面我們通過例子來理解。

    <q>會根據父元素的lang屬性自動創建::before和::after來實現插入quotationmarks。

    p[lang=en]>q{英語}

    p[lang=no]>q{挪威語}

    p[lang=zh]>q{漢語}

    p[lang=en]>q.no-quote{英語2}

    div[lang=no]>.quote{挪威語2}

    CSS片段：

    p[lang=en]>q{

    quotes:"<!--""-->";/*定義引號*/

    }

    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;

    }

以上是“CSS偽元素和Content屬性怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！