HTML5學習_day05(8)--html之偽類元素選擇器(偽元素)
阿新 • • 發佈：2019-01-29
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>偽類元素選擇器</title> <style type="text/css"> div:after{ content: "後面新增"; } div:before{ content: "前面的"; } </style> </head> <body> :before 在內容前面新增一個元素 :after 在內容後面新增一個元素 新增內容用content屬性 <div>123</div> content:屬性值 1.content:“字串”; 2.圖片 content:url(圖片路徑);注意：圖片是原尺寸插入 不可改變大小 3.空 content:""; 4.計數器：content:counter(li)；計數列表時非常方便。 注意：偽元素時不可以通過content屬性來插入html程式碼的. 錯誤程式碼:content:"<h1>標題<h2>" :before :after作用:在內容前面或後面新增額外的內容。 在css3中偽元素用雙冒號(::)來表示,主要是為了區分偽類(:); 6.用偽元素清除浮動。 注意：一定是在父級上寫 語法： 選擇器：after{ content:""; dispaly:block;<!-- 要注意轉化成塊級標籤--> clear:both; } </body> </html>