css3中新增伪类 |css添加一条横线

/* :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新增的常用伪类，它们能够有效的增强网页的可读性和可用性。在实际开发中，大家可以结合实际需求进行灵活应用。