資訊專欄INFORMATION COLUMN
摘要：偽元素被當做的樣式來進行展現，用法和普通的元素用法是一樣的。中的偽元素使用個冒號，在中，為了區分偽類和偽元素，規定偽元素使用個冒號。偽元素的特點優點不占用節點，減少節點數。不僅塊級元素可以設置偽元素，大部分行級元素也可以。
1 什么是偽元素？
CSS 在渲染文檔的時候，偽元素可以通過 css 給 HTML 添加一個元素（叫標簽也行），這個元素在文檔樹中是找不到的。偽元素被當做 CSS 的樣式來進行展現，用法和普通的元素用法是一樣的。
1.1 常用的偽元素和偽類偽元素和偽類的寫法有點像，偽元素使用2個冒號，常見的有：::before，::after，::first-line，::first-letter，::selection、::placeholder等；偽類使用1個冒號，常見的有：:hover，:link，:active，:target，:not()，:focus等。
1.2 偽元素和偽類的區別偽元素添加了一個頁面中沒有的元素（只是從視覺效果上添加了，不是在文檔樹中添加），偽類是給頁面中已經存在的元素添加一個類。
1.3 CSS3中的偽元素在實際的開發工作中，有人會把偽元素用1個冒號來寫，這實際是 CSS2 與 CSS3新舊標準的規定不同而導致的。
CSS2 中的偽元素使用1個冒號，在 CSS3 中，為了區分偽類和偽元素，規定偽元素使用2個冒號。所以，對于 CSS2 標準的老偽元素，比如:first-line，:first-letter，:before，:after，寫一個冒號瀏覽器也能識別，但對于 CSS3 標準的新偽元素，比如::selection，就必須寫2個冒號了。
如果不需要考慮IE8以下的瀏覽器，建議都使用2個冒號的新標準寫法來寫。否則還是使用1個冒號吧！
標準寫法是雙冒號（但考慮兼容性也有人寫單冒號）
::before和::after在被選中元素里面、元素現有內容之前（后）插入內容，需要使用content屬性指定要插入的內容。content必須有值（空值也行）。
content插入的內容默認是 inline 元素，可以通過display:block改變。
3 偽元素的特點 3.1 優點不占用 DOM 節點，減少 DOM 節點數。
讓 CSS 幫助解決了一部分 JavaScript 問題，簡化了開發。
不僅塊級元素可以設置偽元素，大部分行級元素也可以。
避免增加毫無意義的頁面元素。
3.2 缺點不利于調試。
偽元素不真正在文檔內容中體現，只在視覺效果上體現，所以不能給偽元素添加具有實際意義的內容，這部分內容不會搜索引擎抓取。
4 content屬性content 的值可以是空值、字符串、attr()、url()、uri()、counter()等，下面分別演示一下。
4.1 空值可以用來清除浮動。代碼如下：
包含 cleafFix 這個類的元素，其內部的浮動可以被清除。
4.2 string（字符串）在電話號碼前面添加一個電話的icon圖標。代碼如下：
HTML部分
13900001390
CSS部分
.phoneNumber::before{
content:"260E";
font-size: 16px;
}
效果展示：
小電話的圖標是一個特殊字符，每個特殊字符都有特定代碼，特定代碼用在HTML中以 開頭，用在 CSS 中以 ＼ 開頭，用在 JS 中以 ＼u 開頭。4.3 attr( ) 以及 url( )
比如這個電話圖標，在 HTML 中用 ☎ 表示，在 css 中以 260E 表示，在 JavaScript 中，以 u260E 表示。
attr（）：可以調用當前元素的某個屬性。
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;
}
效果預覽：
例子中，content 中的 url 是引用媒體文件，所有不用加引號。4.4 counter 計數器
attr 是調用元素 href 屬性當做字符串顯示出來，所有要加引號。至于括號里面，如果加引號，就會顯示出來 href 的值，如果不加引號就打印字符串 (attr(href))，我還不太清除加載括號里面的引號是什么用法。
counter 調用計數器，可以不使用列表元素實現序號功能。
counter 要配合 counter-increment 和 counter-reset屬性使用。
counter-reset 給同級元素增加計數器，比如一個頁面有多個H1元素，那就給body加計數器。一個H1元素里面有多個H2元素，那就給H1元素加計數器。counter-increment 增加計數器數值。
代碼演示：
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)"、";
}
效果演示：
通過以上實例可以看出：
動態的（會變的值）不加引號。
媒體不加引號。
固定的值、字符串需要加引號。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116823.html
摘要：一的用法如同對偽元素的名稱一樣，是用來給指定的元素的內容前面插入新的內容。二偽類和偽元素的區別偽類種類偽元素種類偽類作用對象是整個元素例如盡管這些條件不是基于的，但結果每一個都是作用于一個完整的元素，比如整個鏈接，段落，等等。 一：:before && :after的用法 :before 如同對偽元素的名稱一樣，:before 是用來給指定的元素的內容前面插入新的內容。舉例說明： .b...
摘要：我們巧妙的提示框打算使用屬性選擇器也就是方括號表示法。相對性這是用在提示框的父元素上的。向上向下提示框要用到關鍵幀，而向左向右提示框使用關鍵幀。注意，在這些關鍵幀中，我們只定義了提示框所需的終止狀態。 原文：https://webdesign.tutsplus.co...原作：Jase Smith翻譯：Stypstive 當你的用戶需要漂亮的圖標給出額外的文字信息時，亦或是當他們在點擊...
摘要：我們巧妙的提示框打算使用屬性選擇器也就是方括號表示法。相對性這是用在提示框的父元素上的。向上向下提示框要用到關鍵幀，而向左向右提示框使用關鍵幀。注意，在這些關鍵幀中，我們只定義了提示框所需的終止狀態。 原文：https://webdesign.tutsplus.co...原作：Jase Smith翻譯：Stypstive 當你的用戶需要漂亮的圖標給出額外的文字信息時，亦或是當他們在點擊...
摘要：下面是偽元素和偽元素的具體用法和使用規則作用在標簽前后添加字符串使用規則后面一定要用把要添加的內容括起來，否則是無法顯示的括號不一定需要添加。場景： 假如有一天，你的在寫一個前端項目，是關于一份點餐商家電話信息表，你啪塔啪塔地寫完了，突然間項目經理跑過來找你，要求你在每一個商家的電話號碼前都添加一個電話符號，來使得電話號碼更直觀和頁面更美觀。這個時候你就糾結了，這不是折磨人嗎？這不是要我在...
摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。 一、前言 百度的前端技術學院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務也沒完成就結束了，遺憾... 關注了IFE，知道2017年2月有新的一期培訓，于是一直在等著報名，然后開始做里面發布的任務（...
閱讀 3514·2023-04-25 17:35
閱讀 2588·2021-11-24 09:39
閱讀 2525·2021-10-18 13:32
閱讀 3409·2021-10-11 10:58
閱讀 1630·2021-09-26 09:55
閱讀 6134·2021-09-22 15:47
閱讀 959·2021-08-26 14:15
閱讀 3466·2019-08-30 15:55
