css开发技巧总结（CSS穿透、一像素边框、:valid和:invalid表单即时验证、::selection美化选中文本）

一、用:valid和:invalid来做表单即时校验

html5丰富了表单元素，提供了类似required,email,tel等表单元素属性。同样的，我们可以利用:valid和:invalid来做针对html5表单属性的校验。

• :required伪类指定具有required 属性的表单元素
• :valid 伪类指定一个通过匹配正确的所要求的表单元素
• :invalid伪类指定一个不匹配指定要求的表单元素

<div class="container">
    <div class="row" style="margin-top: 2rem;">
        <form>
            <div class="form-group">
                <label>name</label>
                <input type="text" required="" placeholder="请输入名称">
            </div>
            <div class="form-group">
                <label>email</label>
                <input type="email" required="" placeholder="请输入邮箱">
            </div>
            <div class="form-group">
                <label>homepage</label>
                <input type="url" placeholder="请输入博客url">
            </div>
            <div class="form-group">
                <label>Comments</label>