創作不易 拒絕白嫖 點個贊呗
關注專欄
學透CSS ,帶你走進CSS的深處！！！
前言
一個優秀的網站永遠都不是冷冰冰的，情感化、人性化一直是現代化網站所追求的！情感化設計利用彩配色激發使用者情感，或高興，或溫暖，或甯靜祥和；利用簡單易懂，自由流暢的互動設計，吸引使用者點選或參與；以及利用暖心體貼的界面文本設計，打動使用者等等。
不知道有多少人關注過蘋果的官方，大膽的顔色，驚人的動畫，我覺得這就是具有情感的網站
雖然我們不是設計師，但是作為一個好的前端開發，在網站開發的時候也是需要一點人性化的意識，下面這兩個輸入框，在邊框 邊距 邊角都不相同，最終的效果也各不相同。
不讨論具體的設計，單純的介紹幾個僞類，希望這幾個僞類，能讓你有所收獲。
:read-write
比對規則
:read-write選擇器将在以下情況下比對元素：
非readonly和disabled的input
input:read-write {
background: #2ecc71;
}
<input type="text" value="正常 input" /> 非readonly和disabled的textarea
textarea:read-write {
background: #2ecc71;
}
<textarea >正常 textarea</textarea> 可以設定contenteditable的元素
p:read-write {
background: #2ecc71;
}
<p contenteditable>contenteditable p</p> :readonly
具有readonly/disabled 屬性的input/textarea等form元素
input:read-only {
background: #e74c3c;
}
<input type="text" value="diabled input" disabled />
<input type="text" value="readonly input" readonly /> 其他不可編輯的元素
p:read-only {
background: #e74c3c;
}
<p class="testInput">普通 p</p>
:required
我覺得這個屬性真的特别好，之前我們在做表單的時候，經常會在前面加一個*表示必須輸入，或者當使用者輸入完之後提示一下某某字段是必須輸入的，使用者體驗真的确實不好。但是有個這個屬性，我們就可以來針對必須輸入的input進行個性化的設定。
設定了required屬性的<input>，<select>, 或 <textarea>元素
input:required,
textarea:required {
border-color: red ;
} :focus
設定目前由鍵盤tab或由滑鼠激活的元素的樣式。
:focus 基本上可以作用在大部分的元素上，設定了contenteditable或者tabindex 的元素也支援。
像<a>, <button>, <input>, <textareas> 各個浏覽器都有不同的預設樣式。
:focus可以設定為全局也可以針對特定的元素。
:focus {
background: #2ecc71;
} :disabled
<button>，<input>，<textarea>，<optgroup>，<option>和<fieldset> 都可以設定:disabled 屬性
input:disabled {
background: #e74c3c;
} :enabled
<input>, <select>, <textarea>可以設定屬性，與:disabled 相反。
:invalid和:valid
這兩個屬性在使用者與頁面上的表單互動時向他們提供回報。
比如下面這個例子：驗證郵箱格式是否正确，之前我們會怎麼做，當使用者輸入完成送出的時候，彈對話框告訴使用者格式不正确。用這兩個屬性就讓事情很簡單！
input:invalid {
background: hsla(0, 90%, 70%, 1);
}
input:valid {
background: hsla(100, 90%, 70%, 1);
}
<label for="email">Email:</label>
<input type="email" name="email" /> 開始的效果；
不正确的效果：
正确的效果
:checked
僅<input> type為radio 和 checkbox 可以設定。
沒有選中的效果
選中後的效果
結語
本文僅僅是單純的介紹，并沒有過多的介紹使用的場景或者是設計，
隻是希望大家可以多多使用這些僞類，來更好的服務使用者。