ＣＳＳ选择器归纳

一、ＣＳＳ新增选择器：

　　　１、Ｅ[att ^ = "val"]匹配具有att属性，并以值val开头。
　　　　　示例：

        　　<style>
                div[class^="a"]{
                    color:blue;
                }
            </style>
            <div>
                <div class="a1">测试数据a1</div>
                <div class="a2">测试数据a2</div>
                <div class="b2">测试数据b2</div>
                <div class="b1">测试数据b1</div>
                <div class="c1">测试数据c1</div>
                <div class="c2">测试数据c2</div>
                <div class="c3">测试数据c3</div>
            </div>


        2、Ｅ[att $ = "val"]匹配具有att属性，并以值val结尾。

 

示例：

        　　<style>
                div[class$="3"]{
                    color:blue;
                }
            </style>
            <div>
                <div class="a1">测试数据a1</div>
                <div class="a2">测试数据a2</div>
                <div class="b2">测试数据b2</div>
                <div class="b1">测试数据b1</div>
                <div class="c1">测试数据c1</div>
                <div class="c2">测试数据c2</div>
                <div class="c3">测试数据c3</div>
            </div>

 

           3、Ｅ[att * = "val"]匹配具有att属性，包含val。
           4、Ｅ[att = "val"]匹配具有att属性，等于val。

 

 

 

二、结构性伪类　　　

 

      1、E:nth-child(n)匹配在父元素中第N个子元素E

 

 

        示例：

 

        p:nth-child(2){

 

            color: red;

 

        }

 

      <div>

 

         <p>测试数据</p>

 

         <p>测试数据</p>

 

         <p>测试数据</p>

 

         <p>测试数据</p>

 

         <p>测试数据</p>

 

         <p>测试数据</p>

 

     </div>

 

     

 

      2、E:nth-last-child(n)匹配在父元素中倒数第N个子元素E

 

      3、E:nth-of-type(n)匹配在同类型中第N个同级元素E

 

      4、E:nth-last-of-type(n)匹配在同类型中倒数第N个同级元素E

 

      5、E:last-child匹配在父元素中最后一个元素E

 

      6、E:first-of-type匹配在父元素中第一个元素E

 

      7、E:only-child匹配在父元素中唯一子元素E

 

      8、E:only-of-type匹配在同类型中唯一兄弟元素E

 

      9、E:empty匹配没有任何子元素的元素E

 

      

三、元素状态选择器

 

 

1、E:checked（被选中）当复先框被选中时
    示例：input:checked + span::after{
               content: "测试";
               display: block;
               width: 100px;
               height: 30px;
               color:blue;
               background-color: red;
        }
     <div style="height: 400px;width: 600px;border:1px solid blue">
        <input type="checkbox"/>
        <span>欢迎！</span>
    </div>

    2、E:enabled(可用)
    3、E:disabled(不可用)
    4、E：:selection(选中)当文本被选中时
       示例：span::selection{
            color: red;
            background-color: blue;
        }

     <span>测试数据测试数据测试数据测试数据测试数据测试数据</span>；

 

四、过滤选择器 E：not(s) 过滤S，否定伪类选择器
五、目标伪类选择器 E：target 通过跳转（可用id/name）跳转改变
六、相邻选择器 E+E{} 第1个不改变，相邻后面才改变
七、兄弟选择器 E~E{...}第1个不改变，后面全改变

   示例：p~p{
            color: red;
        }

       <p>测试数据</p>
       <p>测试数据</p>
       <p>测试数据</p>