前端筆記 偽類的使用

2021-08-21 05:16:28 字數 804 閱讀 4901

css3為了區分偽類和偽元素,偽元素採用雙冒號寫法。

常見偽類——:hover,:link,:active,:target,:not(),:focus。

常見偽元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content,用於在css渲染中向元素邏輯上的頭部或尾部新增內容。

這些新增不會出現在dom中,不會改變文件內容,不可複製,僅僅是在css渲染層加入。

所以不要用:before或:after展示有實際意義的內容,盡量使用它們顯示修飾性內容,例如圖示。

::before和::after必須配合content屬性來使用,content用來定義插入的內容,content必須有值,至少是空。預設情況下,偽類元素的display是預設值inline,可以通過設定display:block來改變其顯示。

content可取以下值:

例如:h2:before

一:清除浮動

二:模擬float:center的效果 test/4.html

三:做出各種圖形效果

五:顯示列印網頁的url

六:給blockquote新增引號

e::first-line 設定物件內的第一行的樣式。此偽元素僅作用於塊物件。內聯物件要使用該偽物件,必須先將其設定為塊級物件。

e::first-letter 設定物件內的第乙個字元的樣式。此偽元素僅作用於塊物件。內聯物件要使用該偽元素,必須先將其設定為塊級物件。該偽元素常被用來配合font-size屬性和float屬性製作首字下沉效果。

偽類的使用

優點 1.不會增加js的dom負擔 2.不會增加瀏覽器對html的解析,加快瀏覽器載入html 3.對seo很有幫助 注意 img input 不能有偽類 表單 focus 事件的使用 input focus div invalid 配合h5正則表單驗證 input type email inval...

css hover偽類的使用

hover的使用,即當滑鼠指標移入元素時,所做出的樣式設定 doctype html html lang en head meta charset utf 8 title demo01 title style ul li ul li hover style head body ul li li li...

clear偽類使用

都知道float會脫離文件流 用什麼辦法撐開父元素呢?手動在本區塊的所有float元素之後加上乙個塊元素並對其新增clear both 可以 但是這樣還要再去修改html頁面 而且多了乙個僅僅是為了控制布局卻沒有實際表現意義的元素 不好.將float的父元素也設定為float 這樣會導致更深的問題 ...