css的一些我的问题 c3属性选择器

//h5新增的表单属性
<!-- 

    autofocus 自动聚焦 一个页面只能有一个
    pattern 后面的属性是一个正则表达式 【手机号验证】
    pattern 属性规定用于验证输入字段的模式；就是指正则表达式；

        新增type类型
        type = "email" 限制用户必须输入email类型

        required
     -->
/* class属性 属性值最后为li1 */
        li[class$="li2"]{
            background-color: crimson;
        }
        <ul>
        <li class="list box li1"></li>
        <li class="list box li2"></li>
        <li class="list box li3"></li>
    </ul>
    <!-- 

        层级选择器
            父元素>子元素{}
                只能选择父元素的最近的一层的元素
            兄弟元素 + 兄弟元素{}
                通过当前的元素 选择符 离他最近 下面的兄弟元素
            兄弟元素 ~ 兄弟元素{}
                通过当前的元素 选择符 下面所有的兄弟元素
     -->
   
   <!-- 

        css3属性选择器

        1、选择符[属性名] 只要带有当前属性名就会被选中；
        2、选择符[属性名=“属性值”] 指定属性名属性值；
        3、选择符[属性名~=“属性值”] 属性值是一个词列表
        只要包含当前词就会被选中
        4、选择符[属性名^="属性值"] 属性值必须是当前指定
        的属性值开头
        5、选择符[属性名$="属性值"] 属性值必须是当前指定属性
        值结尾
        6、选择符[属性名*="属性值"] 属性值只要包含了指定的
        字符就会被选中
        7、选择符[属性名|="属性值"] 属性值仅仅是当前指定的属性值
        或者是以属性值 - 开头 
     -->

<!-- 

        结构伪类选择器
        选择谁 

        在一个父元素下 子集标签类型一致
        1、 选择符:first-child{}
        2、 选择符:last-child{}
        3. 选择符 : nth-child(val){}
            val 
             2n 或者 even 偶数
             2n+1 odd 奇数
        
        如果子集合标签类型不一致
        采用先确定类型 
     -->
     <style>
        :root{
            background-color: cadetblue;
        }
        /*  */
        /* ul:nth-child(2n+1){
            background-color: chartreuse;
        } */
        li:empty{
            /* background-color: coral; */
        }
        /* nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型 */
        li:nth-child(2n){
            background-color: cornsilk;
        }
        span:nth-child(2){
            font-size: 30px;
        }
        #div1 span:nth-last-child(1){
            font-size: 30px;
        }
        #div1 span:nth-last-child(2){
            font-size: 30px;
        }
        /* 因为p标签的存在 无法生效了 */
        #div1 span:nth-child(2){
            font-size: 30px;
        }
        #div1 span:nth-of-type(2){
            font-size: 30px;
        }
        /* 第一个p标签 */
        #div1 p:nth-of-type(1){
            font-size: 30px;
        }
    </style>
    <div id="div1">
        <span>1</span>
        <p>pppppppp</p>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div id="div2">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div>

    </div>
    <ul>
        <li>老虎1</li>
        <li>老虎2</li>
        <li></li>
        <li>老虎4</li>
        <li>老虎5</li>
    </ul>
    <br>
    <ul>
        <li></li>
        <li>老虎2</li>
        <li></li>
        <li>老虎4</li>
        <li>老虎5</li>
    </ul>
    <br>
    <ul>
        <li></li>
        <li>老虎2</li>
        <li></li>
        <li>老虎4</li>
        <li>老虎5</li>
    </ul>