属性选择器 

    1. input[value]{
    2.   cursor: grab;
    3.   /*光标变成小手形状*/
    4. }
    5.     <body>
    6.         <div class="div">
    7.             <input type="text" id="input_text">
    8.             <input type="button" id="input_button" value="显示我的用户名">
    9.         </div>
    10.     </body>

    image.png
    image.png
    上面选出来的就是 input 标签里面带有 value 属性的标签。

    结构伪类选择器
    image.png
    用法举例：
    E : nth-child (n)： 

    <style>
        /*选择div下面的第一个孩子*/
    div :nth-child(1){          
        background-color: red;  
    }                           
    span{                       
        display: block;         
    }                           
</style>
<body>                         
    <div>                      
        <p>我是p标签</p>           
        <span>我是span1</span>   
        <span>我是span2</span>   
        <span>我是span3</span>   
        <span>我是span4</span>   
        <span>我是span5</span>   
    </div>                     
</body>

    image.png
    注意：

    • 上面选择器部分要是下面这样写就会没效果，因为这样写就表示div下面的第一个儿子必须是span否则不会选出来。

      div span:nth-child(1){      
  background-color: red;  
}

    • 常用的奇偶行选择方法

      div :nth-child(2n){
background-color: blue;
}
/*选出偶数个孩子和写even是等效的*/

    • 这里的父子元素有哪一个不写就代表是 * ，选择全部的元素。

    • 上面的参数 n 可以是关键字比如常用的 even (偶数)和 odd (奇数)；
    • 这里的 n 是从0开始的；
    • 参数可以写成（-n+5）这种形式，但超出范围的索引会被忽略；
    • ：nth-child( ) 只看是第几个孩子，不管元素的类型是否一致。要看类型就要用下面这种方法。


    E : first-of-type： 

    div span:nth-of-type(odd){ 
    background-color: red; 
}

    image.png
    注意 ：

    • 由于 ul 里面只能放 li ，所以上面的两种方法就没有区别了；
    • 类选择器、属性选择器和伪类选择器的权重都是10。