學透CSS-學會這9個偽類,讓你的頁面/表單更人性化！！！ 連載中
      
    
      
        網友投稿
        724
        2025-03-31
		    
      
    
                    
      前言
      一個優秀的網站永遠都不是冷冰冰的，情感化、人性化一直是現代化網站所追求的！情感化設計利用彩配色激發用戶情感，或高興，或溫暖，或寧靜祥和；利用簡單易懂，自由流暢的交互設計，吸引用戶點擊或參與；以及利用暖心體貼的界面文本設計，打動用戶等等。
      不知道有多少人關注過蘋果的官方，大膽的顏色，驚人的動畫，我覺得這就是具有情感的網站
      雖然我們不是設計師，但是作為一個好的前端開發，在網站開發的時候也是需要一點人性化的意識，下面這兩個輸入框，在邊框 邊距 邊角都不相同，最終的效果也各不相同。
      不討論具體的設計，單純的介紹幾個偽類，希望這幾個偽類，能讓你有所收獲。
      :read-write
      匹配規則
      :read-write選擇器將在以下情況下匹配元素：
      input:read-write { background: #2ecc71; } 
      textarea:read-write { background: #2ecc71; } 
      p:read-write { background: #2ecc71; } 
      contenteditable p
      :readonly
      匹配規則
      input:read-only { background: #e74c3c; }  
      p:read-only { background: #e74c3c; } 
      普通 p
      :required
      我覺得這個屬性真的特別好，之前我們在做表單的時候，經常會在前面加一個*表示必須輸入，或者當用戶輸入完之后提示一下某某字段是必須輸入的，用戶體驗真的確實不好。但是有個這個屬性，我們就可以來針對必須輸入的input進行個性化的設置。
      匹配規則
      input:required, textarea:required { border-color: red ; }
      :focus
      設置當前由鍵盤tab或由鼠標激活的元素的樣式。
      :focus 基本上可以作用在大部分的元素上，設置了contenteditable或者tabindex 的元素也支持。
      像,