2019-04-02 css选择器

CSS的选择器类型

css:

     css选择器：
        1.元素选择器：
        2.类选择器：  
                   html
                  <div class="box"></div>
                   css:
             .box{}
               3.id选择器
                       html
                <div id="container"></div>
                  css:
                  #container{}
       注：同一个id选择器只能命名一次，因为id具有唯一性

               4.后代选择器：选取的是父元素下的所有子元素
                       ul li{}
        5.子代选择器：父元素下的直接子元素
                    ul>li{}

6相邻兄弟选择器
.good+li
7.通用兄弟选择器
good~li
8.结构伪类选择器
-ul>li:first-child{} 第一个孩子
- ul>li:last-child{} 最后一个孩子
- ul>li:nth-child(n){} 第n个孩子

<html>
    <head>
        <meta charset="utf-8"/>
        <title>结构伪类选择器</title>
        <style>
             .list>li:first-child{
                background:red;
             }
             .list>li:last-child{
                background:green;
             }
             .list>li:nth-child(2){
                background:yellow;
             }
             .list>li:nth-child(3){
                background:blue;
             }
             .list>li:nth-child(4){
                background:gray;
             }
        </style>
    </head>
    <body>
        <ul class="list">
            <li>第一个li</li>
            <li>第二个li</li>
            <li>第三个li</li>
            <li>第四个li</li>
            <li>第五个li</li>
        </ul>
    </body>
</html>