1-3:CSS3课程入门之伪类和伪元素

时间:2021-12-13 19:40:40
E:target 表示当前的URL片段的元素类型,这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素
E:first-line选中第一行文字
E:first-letter选中第一个字
E::selection 当文字被选中时触发效果【注意是双冒号】
Content 属性:
E:after 利用content属性在元素末尾添加内容
E:before 利用content属性在元素开头添加内容
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>checked伪类与~选择器实现好看选择框效果</title>
    <link rel="stylesheet" href="">
    <style>
        *{margin:0; padding:0;}
        label{
            width:30px;
            height:30px;
            position:relative;
            margin-right:5px;
            float:left;
            overflow:hidden;
        }
        span{float:left; width:30px; height:30px; background:blue; }
        input[type=radio]{

            position:absolute;
            left:-30px;
            top:-30px;


        }
        input:checked~span{
            background:red;
        }
    </style>
</head>
<body>
    <label><input type="radio" name="tab" /><span></span></label>
    <label><input type="radio" name="tab" /><span></span></label>
    <label><input type="radio" name="tab" /><span></span></label>
</body>
</html>