成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

偽元素 ::after 和 ::before 應(yīng)該這么用（一）

BlackMass / 1631人閱讀

摘要：偽元素被當做的樣式來進行展現(xiàn)，用法和普通的元素用法是一樣的。中的偽元素使用個冒號，在中，為了區(qū)分偽類和偽元素，規(guī)定偽元素使用個冒號。偽元素的特點優(yōu)點不占用節(jié)點，減少節(jié)點數(shù)。不僅塊級元素可以設(shè)置偽元素，大部分行級元素也可以。

1 什么是偽元素？

CSS 在渲染文檔的時候，偽元素可以通過 css 給 HTML 添加一個元素（叫標簽也行），這個元素在文檔樹中是找不到的。偽元素被當做 CSS 的樣式來進行展現(xiàn)，用法和普通的元素用法是一樣的。

1.1 常用的偽元素和偽類

偽元素和偽類的寫法有點像，偽元素使用2個冒號，常見的有：::before，::after，::first-line，::first-letter，::selection、::placeholder等；偽類使用1個冒號，常見的有：:hover，:link，:active，:target，:not()，:focus等。

1.2 偽元素和偽類的區(qū)別

偽元素添加了一個頁面中沒有的元素（只是從視覺效果上添加了，不是在文檔樹中添加），偽類是給頁面中已經(jīng)存在的元素添加一個類。

1.3 CSS3中的偽元素

在實際的開發(fā)工作中，有人會把偽元素用1個冒號來寫，這實際是 CSS2 與 CSS3新舊標準的規(guī)定不同而導(dǎo)致的。
CSS2 中的偽元素使用1個冒號，在 CSS3 中，為了區(qū)分偽類和偽元素，規(guī)定偽元素使用2個冒號。所以，對于 CSS2 標準的老偽元素，比如:first-line，:first-letter，:before，:after，寫一個冒號瀏覽器也能識別，但對于 CSS3 標準的新偽元素，比如::selection，就必須寫2個冒號了。
如果不需要考慮IE8以下的瀏覽器，建議都使用2個冒號的新標準寫法來寫。否則還是使用1個冒號吧！

2 偽元素 ::before 和 ::after 的用法

標準寫法是雙冒號（但考慮兼容性也有人寫單冒號）

::before和::after在被選中元素里面、元素現(xiàn)有內(nèi)容之前（后）插入內(nèi)容，需要使用content屬性指定要插入的內(nèi)容。content必須有值（空值也行）。

content插入的內(nèi)容默認是 inline 元素，可以通過display:block改變。

3 偽元素的特點 3.1 優(yōu)點

不占用 DOM 節(jié)點，減少 DOM 節(jié)點數(shù)。

讓 CSS 幫助解決了一部分 JavaScript 問題，簡化了開發(fā)。

不僅塊級元素可以設(shè)置偽元素，大部分行級元素也可以。

避免增加毫無意義的頁面元素。

3.2 缺點

不利于調(diào)試。

偽元素不真正在文檔內(nèi)容中體現(xiàn)，只在視覺效果上體現(xiàn)，所以不能給偽元素添加具有實際意義的內(nèi)容，這部分內(nèi)容不會搜索引擎抓取。

4 content屬性

content 的值可以是空值、字符串、attr()、url()、uri()、counter()等，下面分別演示一下。

4.1 空值

可以用來清除浮動。代碼如下：

包含 cleafFix 這個類的元素，其內(nèi)部的浮動可以被清除。

4.2 string（字符串）

在電話號碼前面添加一個電話的icon圖標。代碼如下：

HTML部分

13900001390

CSS部分

        .phoneNumber::before{
            content:"260E";
            font-size: 16px;
        }

效果展示：

小電話的圖標是一個特殊字符，每個特殊字符都有特定代碼，特定代碼用在HTML中以  開頭，用在 CSS 中以 ＼ 開頭，用在 JS 中以 ＼u 開頭。
比如這個電話圖標，在 HTML 中用 ☎ 表示，在 css 中以 260E 表示，在 JavaScript 中，以 u260E 表示。
4.3 attr( ) 以及 url( )

attr（）：可以調(diào)用當前元素的某個屬性。
url（）：可以引用媒體文件（比如圖片）。

演示代碼：

HTML部分：

GOOGLE!

CSS 部分：

        a::before{
            content: url("https://www.google.com/logos/doodles/2018/world-cup-2018-day-19-6211393811382272.3-law.gif");
        }
        a::after{
            content: "("attr(href)")";
        }
        a{
            text-decoration: none;
        }

效果預(yù)覽：

例子中，content 中的 url 是引用媒體文件，所有不用加引號。
attr 是調(diào)用元素 href 屬性當做字符串顯示出來，所有要加引號。至于括號里面，如果加引號，就會顯示出來 href 的值，如果不加引號就打印字符串 (attr(href))，我還不太清除加載括號里面的引號是什么用法。
4.4 counter 計數(shù)器

counter 調(diào)用計數(shù)器，可以不使用列表元素實現(xiàn)序號功能。
counter 要配合 counter-increment 和 counter-reset屬性使用。

counter-reset 給同級元素增加計數(shù)器，比如一個頁面有多個H1元素，那就給body加計數(shù)器。一個H1元素里面有多個H2元素，那就給H1元素加計數(shù)器。
counter-increment 增加計數(shù)器數(shù)值。

代碼演示：

HTML部分：



哺乳動物


狗


猴子


猩猩



冷血動物


魚


蛇

CSS部分：

        body{
            counter-reset: section;
        }
        h1{
            counter-reset:subsection;
        }
        h1::before{
            counter-increment: section;
            content:counter(section)"、";
        }
        h2:before{
            counter-increment: subsection;
            content: counter(section)"."counter(subsection)"、";
        }

效果演示：

4.5 content的值什么時候加引號，什么時候不加

通過以上實例可以看出：

動態(tài)的（會變的值）不加引號。

媒體不加引號。

固定的值、字符串需要加引號。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116823.html

相關(guān)文章

  • CSS基礎(chǔ)篇-- :before && :after的用法，偽類和偽元素的區(qū)別

    摘要：一的用法如同對偽元素的名稱一樣，是用來給指定的元素的內(nèi)容前面插入新的內(nèi)容。二偽類和偽元素的區(qū)別偽類種類偽元素種類偽類作用對象是整個元素例如盡管這些條件不是基于的，但結(jié)果每一個都是作用于一個完整的元素，比如整個鏈接，段落，等等。 一：:before && :after的用法 :before 如同對偽元素的名稱一樣，:before 是用來給指定的元素的內(nèi)容前面插入新的內(nèi)容。舉例說明： .b...

    X_AirDu 評論0 收藏0

  • 如何使用CSS創(chuàng)建巧妙的動畫提示框

    摘要：我們巧妙的提示框打算使用屬性選擇器也就是方括號表示法。相對性這是用在提示框的父元素上的。向上向下提示框要用到關(guān)鍵幀，而向左向右提示框使用關(guān)鍵幀。注意，在這些關(guān)鍵幀中，我們只定義了提示框所需的終止狀態(tài)。 原文：https://webdesign.tutsplus.co...原作：Jase Smith翻譯：Stypstive 當你的用戶需要漂亮的圖標給出額外的文字信息時，亦或是當他們在點擊...

    wmui 評論0 收藏0

  • 如何使用CSS創(chuàng)建巧妙的動畫提示框

    摘要：我們巧妙的提示框打算使用屬性選擇器也就是方括號表示法。相對性這是用在提示框的父元素上的。向上向下提示框要用到關(guān)鍵幀，而向左向右提示框使用關(guān)鍵幀。注意，在這些關(guān)鍵幀中，我們只定義了提示框所需的終止狀態(tài)。 原文：https://webdesign.tutsplus.co...原作：Jase Smith翻譯：Stypstive 當你的用戶需要漂亮的圖標給出額外的文字信息時，亦或是當他們在點擊...

    vpants 評論0 收藏0

  • ::before和::after偽元素的妙用

    摘要：下面是偽元素和偽元素的具體用法和使用規(guī)則作用在標簽前后添加字符串使用規(guī)則后面一定要用把要添加的內(nèi)容括起來，否則是無法顯示的括號不一定需要添加。場景： 假如有一天，你的在寫一個前端項目，是關(guān)于一份點餐商家電話信息表，你啪塔啪塔地寫完了，突然間項目經(jīng)理跑過來找你，要求你在每一個商家的電話號碼前都添加一個電話符號，來使得電話號碼更直觀和頁面更美觀。這個時候你就糾結(jié)了，這不是折磨人嗎？這不是要我在...

    番茄西紅柿 評論0 收藏0

  • 百度前端技術(shù)學(xué)院2017學(xué)習總結(jié)

    摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結(jié)來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。 一、前言 百度的前端技術(shù)學(xué)院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務(wù)也沒完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報名，然后開始做里面發(fā)布的任務(wù)（...

    pkwenda 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<