CSS选择器

标签选择器

根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性

格式：标签名称{ 属性:值; }

注意点:标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签。标签选择器无论标签藏得多深都能选中

id选择器

格式：#id名称{  属性:值;  }

注意点：同一个界面中id的名称是不可以重复的；编写id选择器时一定要在id名称前面加上#；id的名称只能由字母/数字/下划线(a-z 0-9 _)，且id名称不能以数字开头

类选择器

格式：.类名{  属性:值;  }

注意点：同一个界面中class的名称是可以重复的；编写class选择器时一定要在class名称前面加上点；命名规范和id名称的命名规范一样；HTML中每个标签可以同时绑定多个类名

格式:
<标签名称 class="类名1 类名2 ...">
错误的写法:
<p class="para1" class="para2">

在企业开发中到底用id选择器还是用class选择器?

id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式。在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可。

后代选择器

格式：标签名称1  标签名称2{ 属性:值; }

先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性

注意点: 后代选择器必须用空格隔开；后代选择器不仅仅可以使用标签名称,

还可以使用其它选择器；后代选择器可以通过空格一直延续下去

子元素选择器

格式：标签名称1>标签名称2{  属性:值;  }

先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点:

子元素选择器只会查找儿子, 不会查找其他被嵌套的标签；子元素选择器之间需要用>符号连接, 并且不能有空格；子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器；子元素选择器可以通过>符号一直延续下去

后代选择器和子元素选择器区别

后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
    子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

交集选择器

作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性

格式: 选择器1选择器2{ 属性: 值;  }

注意点:选择器和选择器之间没有任何的连接符号；选择器可以使用标签名称/id名称/class名称；交集选择器仅仅作为了解, 企业开发中用的并不多。

并集选择器

作用: 给所有选择器选中的标签设置属性

格式:选择器1,选择器2{ 属性:值; }

注意点:并集选择器必须使用,来连接；选择器可以使用标签名称/id名称/class名称

兄弟选择器

相邻兄弟选择器

作用: 给指定标签后面紧跟的那个标签设置属性

格式: 选择器1+选择器2{ 属性:值; }

注意点: 相邻兄弟选择器必须通过+连接；相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

通用兄弟选择器

作用: 给指定选择器后面的所有选择器选中的所有标签设置属性

格式: 选择器1~选择器2{ 属性:值; }

注意点: 通用兄弟选择器必须用~连接；通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

序选择器

序选择器是CSS3中新增的选择器最具代表性的就是序选择器

作用: 选中指定的任意标签然后设置属性

格式:

1.同级别的第几个

  :first-child 选中同级别中的第一个标签

  :last-child 选中同级别中的最后一个标签

  :nth-child(n) 选中同级别中的第n个标签  比如：ul li:nth-of-type(4){ }找到li中的第四个li设置css样式。

  :nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素中唯一的标签

2.同级同类型的第几个

 :first-of-type 选中同级别中同类型的第一个标签

 :last-of-type 选中同级别中同类型的最后一个标签

 :nth-of-type(n) 选中同级别中同类型的第n个标签

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素中唯一类型的某个标签