偽元素選擇器
一、總結
一句話總結：
一、::first-letter 第一個字
二、::first-line 第一行（以瀏覽器為准的第一行）
三、::selection 被選中的字行（鼠標選中的字段）只能向 ::selection 選擇器應用少量 CSS 屬性：color、background、cursor 以及 outline。
四、::before 和 ::after
1、::before 和 ::after 使用注意？
1.必須帶一個屬性content
2.在內部內容的前面或者后面插入內容
3.當插入的內容定義寬高和其他屬性時，其實就是一個盒子（必須通過display轉換，因為默認是一個行內元素）。
4.input，img，iframe等元素都不能包含其他元素，所以不能通過偽元素插入內容
2、為什么input不支持偽元素(::after,::before)？
input，img，iframe等元素都不能包含其他元素，所以不能通過偽元素插入內容。
3、利用偽元素直接插入字體圖標？
@font-face引入字體，然后在比如::after的content里面直接寫字體的編碼，比如：content: "\e986";
1 <body> 2 <input type="text"><span></span> 3 </body> 4 5 @font-face { 6 font-family: 'icomoon'; 7 src: url('fonts/icomoon.eot?vhnprv'); 8 src: url('fonts/icomoon.eot?vhnprv#iefix') format('embedded- opentype'), 9 url('fonts/icomoon.ttf?vhnprv') format('truetype'), 10 url('fonts/icomoon.woff?vhnprv') format('woff'), 11 url('fonts/icomoon.svg?vhnprv#icomoon') format('svg'); 12 font-weight: normal; 13 font-style: normal; 14 } 15 span { 16 position: relative; 17 } 18 span::after { 19 content: "\e986"; 20 font-family: "icomoon"; 21 position: absolute; 22 left: -20px; 23 top: 0; 24 }
二、CSS3新增選擇器：偽元素選擇器
轉自或參考：CSS3新增選擇器：偽元素選擇器
https://www.cnblogs.com/EricZLin/p/8857405.html">CSS3新增選擇器：偽元素選擇器
一、 ::first-letter 第一個字
二、 ::first-line 第一行（以瀏覽器為准的第一行）
三、 ::selection 被選中的字行（鼠標選中的字段）只能向 ::selection 選擇器應用少量 CSS 屬性：color、background、cursor 以及 outline。
<body> <p>微軟的 Internet Explorer(IE) 是當今最流行的因特網瀏覽器。它發布於 1995 年，並於 1998 年在使用人數上超過了 Netscape。Firefox 是由 Mozilla 發展而來的新式瀏覽器。
它發布於 2004 年，並已成長為因特網上第二大最流行的瀏覽器。Opera 是挪威人發明的因特網瀏覽器。它以下列特性而聞名於世：快速小巧、符合工業標准、適用於多種操作系統。對於一系列小型
設備諸如手機和掌上電腦來說，Opera 無疑是首選的瀏覽器。Chrome 是免費的開源 web 瀏覽器，它由 Google 開發。該瀏覽器於 2008 年 9 月發布。Chrome 4 是最新的谷歌瀏覽器Safari 是
由蘋果公司開發的瀏覽器，適用於 Mac 和 Windows 系統。該瀏覽器於 2003 年 6 月發布。</p> </body>
<style> p::first-letter{ /* 第一個字母 */ font-size: 50px; } p::first-line{ /* 第一行（以瀏覽器為准的第一行） */ background: rgb(199, 24, 24); } /* 被選中的字行（鼠標選中的字段） */ p::selection{ background: #48ff00; } ::-moz-selection{ /* 兼容 */ background: #48ff00; } </style>
四、 ::before 和 ::after
1. 必須帶一個屬性content
2.在內部內容的前面或者后面插入內容
<div>必須帶一個屬性content</div>
div::before { content: "我是插入的內容"; background: #572eb8; }
3.當插入的內容定義寬高和其他屬性時，其實就是一個盒子（必須通過display轉換，因為默認是一個行內元素）。
<body> <div>盒子1</div> </body>
div{ width: 500px; height: 500px; border: 1px solid #000; } div::before{ content: "插入的盒子"; display: block; width: 200px; height: 200px; background: rgb(211, 29, 29); }
4.上述可以解釋清除浮動的后面兩種方法，單偽元素法和雙偽元素法（清除浮動的四種方法：額外標簽法，overflow：hidden，單偽元素法和雙偽元素法）
五、在字體圖標里的運用，直接寫入css里，不需要在HTML插入（之前的方法：
一、 ::first-letter 第一個字
二、 ::first-line 第一行（以瀏覽器為准的第一行）
三、 ::selection 被選中的字行（鼠標選中的字段）只能向 ::selection 選擇器應用少量 CSS 屬性：color、background、cursor 以及 outline。
<body> <p>微軟的 Internet Explorer(IE) 是當今最流行的因特網瀏覽器。它發布於 1995 年，並於 1998 年在使用人數上超過了 Netscape。Firefox 是由 Mozilla 發展而來的新式瀏覽器。
它發布於 2004 年，並已成長為因特網上第二大最流行的瀏覽器。Opera 是挪威人發明的因特網瀏覽器。它以下列特性而聞名於世：快速小巧、符合工業標准、適用於多種操作系統。對於一系列小型
設備諸如手機和掌上電腦來說，Opera 無疑是首選的瀏覽器。Chrome 是免費的開源 web 瀏覽器，它由 Google 開發。該瀏覽器於 2008 年 9 月發布。Chrome 4 是最新的谷歌瀏覽器Safari 是
由蘋果公司開發的瀏覽器，適用於 Mac 和 Windows 系統。該瀏覽器於 2003 年 6 月發布。</p> </body>
<style> p::first-letter{ /* 第一個字母 */ font-size: 50px; } p::first-line{ /* 第一行（以瀏覽器為准的第一行） */ background: rgb(199, 24, 24); } /* 被選中的字行（鼠標選中的字段） */ p::selection{ background: #48ff00; } ::-moz-selection{ /* 兼容 */ background: #48ff00; } </style>
四、 ::before 和 ::after
1. 必須帶一個屬性content
2.在內部內容的前面或者后面插入內容
<div>必須帶一個屬性content</div>
div::before { content: "我是插入的內容"; background: #572eb8; }
3.當插入的內容定義寬高和其他屬性時，其實就是一個盒子（必須通過display轉換，因為默認是一個行內元素）。
<body> <div>盒子1</div> </body>
div{ width: 500px; height: 500px; border: 1px solid #000; } div::before{ content: "插入的盒子"; display: block; width: 200px; height: 200px; background: rgb(211, 29, 29); }
4.上述可以解釋清除浮動的后面兩種方法，單偽元素法和雙偽元素法（清除浮動的四種方法：額外標簽法，overflow：hidden，單偽元素法和雙偽元素法）
五、在字體圖標里的運用，直接寫入css里，不需要在HTML插入（之前的方法：字體圖標）
- 發現一個很坑的問題：input不能使用偽元素（為什么input不支持偽元素(:after,:before)？）
- 示范一個搜索欄的做法，利用字體圖標和偽元素，定位：
<body> <input type="text"><span></span> </body>
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?vhnprv'); src: url('fonts/icomoon.eot?vhnprv#iefix') format('embedded- opentype'), url('fonts/icomoon.ttf?vhnprv') format('truetype'), url('fonts/icomoon.woff?vhnprv') format('woff'), url('fonts/icomoon.svg?vhnprv#icomoon') format('svg'); font-weight: normal; font-style: normal; } span { position: relative; } span::after { content: "\e986"; font-family: "icomoon"; position: absolute; left: -20px; top: 0; }
當然還有其他做法，比如直接在span里放入字體圖標，然后定位，或者直接用背景圖。