資訊專欄INFORMATION COLUMN
摘要：原文傳送門一介紹為了區分偽類和偽元素，偽元素采用雙冒號寫法。默認情況下，偽類元素的是默認值，可以通過設置來改變其顯示。舉例百度前面給出一張圖片，后面給出屬性。復制代碼百度復制代碼效果調用計數器，可以不使用列表元素實現序號功能。
原文傳送門： https://www.cnblogs.com/staro...
一、介紹css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。
常見偽類——:hover,:link,:active,:target,:not(),:focus。
常見偽元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用于在css渲染中向元素邏輯上的頭部或尾部添加內容。
這些添加不會出現在DOM中，不會改變文檔內容，不可復制，僅僅是在css渲染層加入。
所以不要用:before或:after展示有實際意義的內容，盡量使用它們顯示修飾性內容，例如圖標。
舉例：網站有些聯系電話，希望在它們前加一個icon?，就可以使用:before偽元素，如下：
復制代碼
12345645654
Note:這些特殊字符的html，js和css的寫法是不同的，具體可查看html特殊字符的html，js，css寫法匯總。
二、content屬性::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。默認情況下，偽類元素的display是默認值inline，可以通過設置display:block來改變其顯示。
content可取以下值。
1、string
使用引號包一段字符串，將會向元素內容中添加字符串。如：a:after{content:""}
舉例：
復制代碼
平凡的世界
2、attr()
通過attr()調用當前元素的屬性，比如將圖片alt提示文字或者鏈接的href地址顯示出來。
starof
3、url()/uri()
用于引用媒體文件。
舉例：“百度”前面給出一張圖片，后面給出href屬性。
復制代碼
4、counter()
調用計數器，可以不使用列表元素實現序號功能。
配合counter-increment和counter-reset屬性使用：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
代碼:
復制代碼
復制代碼
效果：
了解更多可參考：https://developer.mozilla.org...
三、使用1、清除浮動
清除浮動方法有多種，現在最常用的就是下面這種方法，僅需要以下樣式即可在元素尾部自動清除浮動
復制代碼
.cf:before,
.cf:after {
content: " "; display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
復制代碼
2、模擬float:center的效果
float沒有center這個取值，但是可以通過偽類來模擬實現。
這個效果實現很有意思，左右通過::before float各自留出一半圖片的位置，再把圖片絕對定位上去。
核心css如下：
復制代碼
page-wrap { width: 60%; margin: 40px auto; position: relative; } logo { position: absolute; top: 0; left: 50%; margin-left: -125px; } l, #r { width: 49%; } l { float: left; } r { float: right; } l:before, #r:before { content: ""; width: 125px; height: 250px; } l:before { float: right; } r:before { float: left; }復制代碼
完整代碼如下：
View Code
出自：https://css-tricks.com/float-...
3、做出各種圖形效果
舉例：一個六角星
復制代碼
點我查看更多。
4、不使用圖片創建小圖標
舉例：比如一個電話
很巧妙的應用一個div左border加圓角當機身，::before和::after配合圓角當聽筒。
復制代碼
更多圖標：
View Code
這個效果來自：http://www.w3cfuns.com/blog-5...
有大神用偽元素創建了84種小圖標，具體可查看http://nicolasgallagher.com/p...
5、顯示打印網頁的URL
復制代碼
6、給blockquote添加引號
經常用到給blockquote 引用段添加巨大的引號作為背景，可以用 ：:before 來代替 background 。好處是即可以給背景留下空間，還可以直接使用文字而非圖片：
復制代碼
引用一個段落,雙引號用::before偽元素實現
7、超鏈接特效
舉例：配合 CSS定位實現一個鼠標移上去，超鏈接出現方括號的效果
復制代碼
鼠標移上去出現方括號
復制代碼
更多創意鏈接特效可參考： Creative Link Effects 。
8、::before和::after實現多背景圖片
舉例：一個標簽應用5張背景圖
View Code
原效果來自：Multiple Backgrounds and Borders with CSS 2.1
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113858.html
摘要：原文傳送門一介紹為了區分偽類和偽元素，偽元素采用雙冒號寫法。默認情況下，偽類元素的是默認值，可以通過設置來改變其顯示。舉例百度前面給出一張圖片，后面給出屬性。復制代碼百度復制代碼效果調用計數器，可以不使用列表元素實現序號功能。 原文傳送門： https://www.cnblogs.com/staro... 一、介紹 css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。 常見偽類——:h...
摘要：原文傳送門一介紹為了區分偽類和偽元素，偽元素采用雙冒號寫法。默認情況下，偽類元素的是默認值，可以通過設置來改變其顯示。舉例百度前面給出一張圖片，后面給出屬性。復制代碼百度復制代碼效果調用計數器，可以不使用列表元素實現序號功能。 原文傳送門： https://www.cnblogs.com/staro... 一、介紹 css3為了區分偽類和偽元素，偽元素采用雙冒號寫法。 常見偽類——:h...
摘要：關于的源碼分析，本文并不打算展開講了。大家可以參考我之前的一篇文章源碼詳細分析。在刪除節點時，父類的刪除邏輯并不會修復所維護的雙向鏈表，這不是它的職責。在節分析鏈表建立過程時，我故意忽略了部分源碼分析。 1. 概述 LinkedHashMap 繼承自 HashMap，在 HashMap 基礎上，通過維護一條雙向鏈表，解決了 HashMap 不能隨時保持遍歷順序和插入順序一致的問題。除此...
摘要：介紹是一個擴展，主要用來觀察內存泄露問題，基本用法如下實現分析分析的版本為。的入口函數在文件中，通過進行聲明。下面分析下函數的具體實現函數內部會遞歸調用函數得到最終堆快照的結果。回調的觸發與的鉤子有關，詳細看下一節分析。 介紹 memwatch是一個c++擴展，主要用來觀察nodejs內存泄露問題，基本用法如下： const memwatch = require(@airbnb/mem...
摘要：，，面向切面編程。，切點，切面匹配連接點的點，一般與切點表達式相關，就是切面如何切點。例子中，注解就是切點表達式，匹配對應的連接點，通知，指在切面的某個特定的連接點上執行的動作。，織入，將作用在的過程。因為源碼都是英文寫的。 之前《零基礎帶你看Spring源碼——IOC控制反轉》詳細講了Spring容器的初始化和加載的原理，后面《你真的完全了解Java動態代理嗎？看這篇就夠了》介紹了下...
閱讀 3948·2021-09-24 10:24
閱讀 1386·2021-09-22 16:01
閱讀 2713·2021-09-06 15:02
閱讀 1014·2019-08-30 13:01
閱讀 1002·2019-08-30 10:52
閱讀 633·2019-08-29 16:36
閱讀 2232·2019-08-29 12:51
閱讀 2333·2019-08-28 18:29
