选择器类型

下面给大家整理了一些选择器

1、标签选择器：以标签名开头，选择所有div元素

 div{
     margin: 0;
     padding: 0;
 }

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

<div class="wrap"></div>

.wrap{
      margin: 0;
      padding: 0;
}

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

<div id="wrap"></div>

#wrap{
      margin: 0;
      padding: 0;
}

4、子选择器：以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块)

<div id="wrap">
        <p></p>
        <p></p>
</div>

 #wrap>p{
         margin: 0;
       	 padding: 0;
}

5、兄弟选择器：以_{隔开兄弟关系的元素(模块名}模块名 修饰~前模块往下的所有兄弟模块)

<div>
        <p class="first"></p>
        <p></p>
        <p></p>
</div>

.first~p{
         margin: 0;
         padding: 0;
}

6、相邻选择器：以+隔开相邻关系的元素(模块名+模块名 修饰加号前模块往下的相邻的模块 只一个)

<div>
        <p class="first"></p>
        <p></p>
        <p></p>
</div>

.first+p{
         margin: 0;
         padding: 0;
}

7、全局选择器（也叫通配符选择器）：以*开头(星号标在大括号前，修饰了包含body所有的标签)

<div>
        <p class="first"></p>
        <p></p>
        <p></p>
</div>

*{
  margin: 0;
  padding: 0;
}

8、并集择器：以，分隔(逗号分隔开需要修饰的模块名)

.first,p{
         margin: 0;
         padding: 0;
}

 <div>
        <p class="first"></p>
        <span></span>
        <p></p>
        <p></p>
</div>

9、属性选择器：[] ([type=text]修饰属性为type=text的模块)

<div>
        <p class="first"></p>
        <span></span>
        <input type="text">
        <p></p>
        <p></p>
</div>

10、交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格

<div>
        <p class="first"></p>
        <span></span>
        <input type="text">
        <p></p>
        <p></p>
</div>

div.first{
          margin: 0;
          padding: 0;
 }