css 的 :checked伪类选择器不能动态赋予样式吗

Question

像我这个表单

        <form>
            <input type="checkbox" name="sex" id="sexn" value="nan" />
            <input type="checkbox" name="sex" id="sexv" value="nv" />
        </form>

给他写样式如下

            input{                width: 30px;                height: 30px;                outline: none;
            }            input[type="checkbox"]:checked{                border: 3px solid red;
            }

为啥选中的复选框没有效果？