CSS选择器有哪些

1.标签选择器

以标签名开头，选择所有div元素

div { margin:0; padding:0; }

2、类选择器

给标签取class名，以点（.）加class名开头，选择所有该class名的元素

<div class="aa"></div>

.aa {
        width: 100px;
        height: 100px;
        background-color: red;
    }

3、id选择器

给标签取id名，以#加id名开头，具有唯一性，选择”id = ‘aa’”的元素

<div id="aa"></div>

#aa {
        width: 100px;
        height: 100px;
        background-color: red;
    }

4、子选择器

以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块)

<div>
        <p>11</p>
        <p>11</p>
        <span>33</span>
    </div>

div>p {
        width: 100px;
        height: 100px;
        background-color: red;
    }

5、包含选择器

以空格隔开包含关系的元素，(模块名模块名，修饰空格前模块内所有该模块)

<div>
        <p>11</p>
        <p>11</p>
        <span>33</span>
    </div>

div p {
        width: 100px;
        height: 100px;
        background-color: red;
    }

6、兄弟选择器

以~隔开兄弟关系的元素(模块名~模块名 修饰~前模块往下的所有兄弟模块)

<div>
        <p class="first">11</p>
        <p>22</p>
        <p>33</p>
    </div>

.first~p {
        width: 100px;
        height: 100px;
        background-color: red;
    }

8、全局选择器

以*开头(星号标在大括号前，修饰了包含body所有的标签) 

9、群选择器

以，分隔(逗号分隔开需要修饰的模块名)

<div>
        <p class="first">11</p>
        <span>888</span>
        <p>22</p>
    </div>

.first,span {color: red;}

10、属性选择器

[] ([type=text]修饰属性为type=text的模块)

<div>
        <input type="text">
    </div>

 [type=text]{color: blue;}

11、伪类选择器

<ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>

  (1) li:first-child{} (修饰第一个li)

    (2) li:last-child{} (修饰最后一个li)

    (3) li:nth-child{} (修饰第()个li)

    (4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)