CSS中的偽元素選擇器


定義

偽元素選擇器:就是有連續兩個冒號的選擇器,如::first-line::first- letter、::before 和::after

  1. E::first-letter文本的第一個單詞或字(如中文、日文、 韓文等)
  2. E::first-line 文本第一行;
  3. E::selection 可改變選中文本的樣式;
  4. E::before和E::after

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>偽元素選擇器</title>
    <style type="text/css">
          p::first-letter {  /* 選擇第一個字 */ color: red; font-size: 25px; } p::first-line { /* 選擇第一行 */ color: green; font-size: 20px; } p::selection { /* 選中變色 */ color: blue; } div:before { /* 放在盒子內部的前面 */ content:"一只"; } div:after { /* 放在盒子內部的后面插入 */ content:"豬"; } </style> </head> <body> <h1>靜夜思</h1> <p>床前明月光,疑是地上霜。舉頭望明月,低頭思故鄉</p> <div>特立獨行的</div> </body> </html>

實現效果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM