CSS3是CSS的升級版,它為我們帶來了很多的新特性。在CSS3中,新增了一些非常有用的偽類,下面我們就一一來了解一下吧!
/* :read-only */ :read-only 偽類可以用于匹配只讀的input和textarea元素。當元素為只讀時,它將被應用。在此狀態下,用戶無法修改表單的值。 input:read-only { background-color: #eee; } textarea:read-only { background-color: #eee; } /* :read-write */ :read-write 偽類是與 :read-only 相反的。它用于匹配可編輯的input和textarea元素。如果您想表單元素在不可編輯時有不同的樣式,可以使用 :not(:read-write)。 input:not(:read-write) { border-color: red; } /* :placeholder-shown */ :placeholder-shown 偽類用于匹配 input 或 textarea 元素當中 placeholder 文本處于顯示狀態時的表現。 input[type="text"]:placeholder-shown { background-color: #fff; } /* :valid */ :valid 偽類用于匹配驗證通過的表單元素。可以和屬性選擇器搭配使用。 input[type="email"]:valid { border: 2px solid green; } /* :invalid */ :invalid 偽類用于匹配驗證失敗的表單元素。同樣可以和屬性選擇器搭配使用。 input[type="email"]:invalid { border: 2px solid red; } /* :default */ :default 偽類用于匹配被預設為默認值的表單元素。可以和屬性選擇器搭配使用。 input[type="text"]:default { background-color: #eee; }
以上就是CSS3新增的常用偽類,它們能夠有效的增強網頁的可讀性和可用性。在實際開發中,我們可以結合實際需求進行靈活應用。