学习css3时必须掌握的几种常用选择器

选择器

1. 标签选择器

作用：根据指定的标签名称，在当前页面中找到所有该标签，并设置属性

格式：标签名称{属性：值；…}

注意：无法选择某一个

 无论藏得多深都能被选中

 只要是html中的标签都能被当做标签选择器

2.id选择器

作用：根据指定的id的值，找到对应的标签设置其属性

格式：#id的值{属性：值；…}

注意：1.都可以给html的标签设置id属性

 2.界面中的id的值不能相同

 3.写id选择器是一定要在前面加上 #

 4.id的取值需要遵守一些规范

    1.只能由数字字母或下划线组成

    2.值不能以数字开头

    3.不能使用html中的标签作为id的值

    4.在企业开发中如果你仅仅是为了设置样式，我们不会使用id选择器

      因为id选择器在前端开发中是留给javascript来使用的

3. 类选择器

作用：根据指定的class的值，找到对应的标签，然后设置其属性

格式：.class的值{属性：值；…}

注意：1.都可以给html的标签设置class属性

 2.页面中的class的值可以相同

 3.写class选择器时，一定要在前面加上【.】

 4.class的值得规范与id相同

 5.单单设置样式时，第一时间想到class 最好不要使用id选择器

 6.class可以设置多个值  方便选择

   格式：<p class="值1 值2"></P>

           .值1{}   .值2{}  都有效果

4. 后代选择器

作用：找到指定标签的所有后代标签并设置属性

格式：标签1 标签2{属性：值；…}

注意：1.后代选择器之间空格隔开

 2.后代不仅仅是儿子也包括孙子....

 3.后代选择器不仅仅可以使用标签还可以使用其他选择器【id/class ......】

5. 子元素选择器

作用：找到指定标签中，所指定的直接子元素，并设置其属性

格式：标签1>标签2{属性：值；…}

注意：1.子元素选择器会查找儿子，不会查找其他的标签

 2.子元素选择器直接需要用>连接

 3.子元素选择器不仅仅可以使用标签名称，也可以使用其他选择器

 4.子元素选择器可以通过>一直延续下去

6. 后代选择器与子元素选择器如何选择？

在企业开发中，如果想选中标签中所有的特定标签使用后代选择器

          如果想选中标签纸特定的儿子标签 使用子元素选择器

7. 交集选择器

作用：给所有选择器选中的或被标签选择的 相交的那一部分标签 设置其属性

格式：选择器1选择器2{属性：值；…}

注意：1.选择器与选择器之间没有任何链接

 2.选择器可以使用标签名/id/class

 3.企业在交集选择器基本不用【既然你都设置了 id/class  我干啥还要用交集】

8. 并集选择器

作用：给所有选择器中选中的标签添加属性

格式：选择器1，选择器2，选择器3，…{属性：值；…}

注意：1选择器之间有，隔开

 2选择器可以写多个

9. 兄弟选择器

   1相邻兄弟选择器 css2

   作用：给指定选择器后面紧跟的选择器 选择的标签 添加样式

   格式：选择器1+选择器2{属性：值；…}

   注意：1相邻的兄弟选择器必须用+链接

    2相邻的选择器只能选择紧跟其后的标签，不能选择隔开的
   

   2通用兄弟选择器 css3

   作用：给指定选择器后面的所有选择器 选择的标签 添加样式

   格式：选择器1~选择器2{属性：值；…}

   注意：1通用的兄弟选择器必须用~链接

    2通用的选择器是指定选择器后面某个选择器选择的所有标签
   
     无论有没有被隔开都可以被选中
   

10. 序选择器[css3中最具代表的选择器]

1.同级别的第几个

格式：：first-child 选取在同一级指定的第一个元素

last-child 选取在同一级指定的最后一个元素

nth-child(n) 选取在同一级指定的第N一个元素

    :nth-last-child(n)  选取在同一级指定的倒数第N一个元素

    ：only-child     选择父元素中唯有该选择器的元素

    : nth-child(odd)  选取在同一级中奇数行的元素

    : nth-child(even)  选取在同一级中偶数行的元素

    : nth-child(xn+y)  x和y是用户自定义的 n是一个记数器 从0开始递增

     如去同一级别是三倍数行  ：nth-chilid(3n+0)

注意：不区分类型

2.同类型的第几个

格式：：first-of-type 选取在同一级同类型指定的第一个元素

last-of-type 选取在同一级同类型指定的最后一个元素

nth-of-type(n) 选取在同一级同类型指定的第N一个元素

    :nth-last-of-type(n)  选取在同一级同类型指定的倒数第N一个元素

    ：only-of-type     选择父元素中唯有该选择器类型的元素

    :nth-of-type(odd)  选取在同一级同类型中奇数行的元素

    :nth-of-type(even)  选取在同一级同类型中偶数行的元素

    :nth-of-type(xn+y)  x和y是用户自定义的 n是一个记数器 从0开始递增

     如去同一级别是三倍数行  ：nth-chilid(3n+0)

注意:区分类型
11.属性选择器
格式 [属性] 根据指定的属性名找到对应的标签
[属性=值] 根据属性和值 找到对应的标签
[属性^=值] 选取属性的取值以什么开头的标签
[属性$=值] 选取属性的取值以什么结尾的标签
[属性*=值] 选取属性的取值包含指定的值的标签
12通配符选择器
作用：给当前页面上所有的标签设置属性
格式：*{属性：值；。。。。}
注意：企业中一般不使用，因为页面标签过多时，通赔符会遍历页面的所有标签然后设置值 其性能变差
13.伪元素选择器
: after 属性content 作用给标签添加文本 图片 多媒体