css3新增的元素选择器

        /* h3:nth-of-type(2){} 同种元素下的第几个 */
        h3:nth-of-type(2){
            color: red;
        }
        /* h3:nth-child(){}  子元素下的第几个 */
        h3:nth-child(3){
            color: green;
        }
        /* 可以找到一个子元素 */
        h3+p{
            color: yellow;
        }
        /* 可以找到多个子元素 */
        h3~p{
            color:blue
        }
        /* 属性选择器 */
        [title="这是一个标题"]{
            color: red;
        }
        /* ~属性值是否包含某个值,要求属性值为空格分割线 */
        [class~='cls']{
            color: pink;
        }
        /* 属性值以某个属性开头的 要求属性值以横线分割开 */
        [class|='cls']{
            background-color: rgb(173, 201, 233);
        }
        /* *属性值是否包含cls 不管cls是开头还是结尾,对属性值无要求 */
        [class*='cls']{
            color: purple;
        }
        /* 以某个属性值开头的 */
        [class^='cls2']{
            color: salmon;
        }
        /* 以某个属性值结尾的 */
        [class$="cls"]{
            background-color: silver;
        }
        :lang(zh-cn){
            color: teal;
        }

        :root{
            background-color: rgb(197, 145, 202);
        }
        :checked{
            width: 20px;
            /* background-color: red !important; */
            outline: red 2px solid;

        }
        :checked+span{
            color: teal;
        }
        /* :enabled和:disabled 能够被禁用的标签 
        input button checkbox radio 等这些标签可以使用这些属性
        */
        :enabled{
            border: 1px yellow solid;
        }
        :disabled{
            border: 1px solid red;
        }
        /* a标签的属性 target目标元素属性 */
        :target{
            border: 1px solid rgb(88, 85, 88);
            background-color: rgb(173, 201, 233);
        }
        p:last-child{
            border: 1px solid red;
            width: 600px;
            height: 100px;
        }
        /* p:last-of-type{
            border: 1px solid red;
            width: 600px;
            height: 100px;
        } */
        /* 首字母 */
        /* 伪类:不存在的类,但是可以通过该类设置样式,列入:last-child */
        /* 伪元素:不存在页面的元素,但是又可以像标签一样正常使用:affter :befor */
        /* 在css3之前为了区分伪元素和伪类 双冒号是伪元素,单冒号是伪类,才css3之后都可以是单冒号 */
        p:after{
            color: rgb(28, 150, 28);
            content: "你好";
        }
        p::first-letter{
            color: rgb(33, 60, 83);
            font-size: 50px;
        }
        /* 首行 */
        p::first-line{
            background-color: red;
        }
        /* 文字被选中时的颜色 */
        p::selection{
            color: aliceblue;
            background-color: black;
        }
        /*找到所有的空白元素*/
        :empty{
            width: 40px;
            height: 40px;
            background-color: red;
        }