CSS选择器

标签选择器：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性。

1. 格式：标签名称 {属性：值；}
2. 注意点：
   1）标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签。
   2） 标签选择器无论标签藏得多深都能选中。
   3）只要是HTML中的标签就可以作为标签选择器。

id选择器：根基指定的id名称找到对应的标签，然后设置属性。

1. 格式：#id名称 { 属性：值；}
2. 注意点：
   1）每个HTML标签都有一个属性就叫做id，也就是说每个标签都可以设置id。
   2）在同一个界面中id的名称是不可以重复的。
   3）在编写id选择器时一定要在id名称前加上#。
   4）id的名称是有一定规范的。
   4.1）id的名称只能有字母、数字、下划线。4.2）id名称不能以数字开头。
   4.3）id名称不能是HTML标签的名称，不能是hr、a、img、input。。。。。。
   4.4）在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用id，因为在前端开发中id是留给js使用的。

类选择器：根据指定的类名称遭到对应的标签，然后设置属性

1. 格式：.类名称 { 属性：值；}
2. 注意点：
   1）每个HTML标签都有一个属性就叫做class，也就是说每个标签都可以设置类名。
   2）在同一个界面中类的名称是可以重复的。
   3）在编写类选择器时一定要在类名称前加上.。
   4）类的名称的规范和id选择器规范是一样的。
   5）类名就是专门用来给某个特定的标签设置样式的。
   6）在HTML中每个标签可以同时绑定多个类名。格式：<标签名称 class="类名1 类名2...">
   
   
   1.id和class的区别？id是不可以重复的，但class可以重复、一个HTML标签只能绑定一个id名称，但一个HTML标签可以绑定多个class名称。
   2.id选择器和class选择器的区别？id选择器是以#开头，class选择器是以.开头。
   3.在企业开发中到底用id选择器还是class选择器？id一般情况下给js使用，所以除非特殊情况，否则不要使用id去设置样式。
   4.在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平。一般情况下企业开发中要注重冗余代码的抽取，可以将一些公共的代码抽取到一个类选择器中，然后让标签和这个类选择器绑定即可。
   
   
   

后代选择器：找到指定标签的所有特定的后代标签，设置属性。

1. 格式：标签名称1 标签名称2 {属性：值；}
   先找到标签名称1的标签，然后再在这个标签1下面去找所有名称叫做标签名称2的标签 ，然后设置属性。
2. 注意点：
   1）后代选择器必须用空格隔开。
   2）后代不仅仅是儿子，也包括孙子、重孙子。只有最终是放到指定标签1中的都是后代.
   3）后代选择器不仅仅可以使用标签名称，还可以使用其他选择器（id选择器、类选择器...）。

子元素选择器：找到指定标签中所有特定的直接子元素，然后设置属性。

1. 格式：标签名称1>标签名称2 {属性：值；}
2. 注意点：
   1）子元素选择器只会查找儿子，不会查找其他被嵌套的标签。
   2）子元素选择器之间需要用>符号连接并且不能有空格。
   3）子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器（id选择器、类选择器...）。
   
   1.后代选择器和子元素选择器之间的区别？
   1.1）后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号。
   1.2）后代选择器会选中指定标签1中，所有的特定后代标签，也就是会选中儿子、孙子......只要是被放到指定标签1中的特定标签都会被选中，子元素选择器会选中指定标签1中，所有的特定直接标签，也就是只会选中特定的儿子标签。
   2.后代选择器和子元素选择器之间的共同点？
   2.1）后代选择器和子元素选择器都可以使用标签名称、id名称、class名称来作为选择器。
   2.2）后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去，直到选中你想要指定的标签。
   3.在企业开发中如何选择？
   如果想选中指定标签中的所有特定的标签，那么就使用后代选择器，如果只想选中指定标签中的所有特定儿子元素，那么就选择子元素选择器。

交集选择器：给所有选择器选中的标签中，相交的那部分标签设置属性。

1. 格式：选择器1选择器2 { 属性：值；}
2. 注意点：
   1）选择器和选择器之间没有任何的连接符号。
   
   
   
   2）选择器可以使用标签名称、id名称。class名称。
   
   
   
   3）交集选择器仅仅作为了解，企业开发中用的并不多。

并集选择器：给所有选择器选中的标签设置属性。

1. 格式：选择器1，选择器2 { 属性：值；}
2. 注意点：
   1）并集选择器必须使用，来连接。
   2）并集选择器可以使用标签名称、id名称。class名称。
   

兄弟选择器

1. 相邻兄弟选择器：给指定选择器后面紧跟的那个选择器选中的标签设置属性。
   1）格式：选择器1+选择器2 { 属性：值；}
   2）注意点：相邻兄弟选择器必须通过+连接、相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签。
2. 通用兄弟选择器：给指定选择器后面的所有选择器选中的所有标签设置属性。
   1）格式：选择器1~选择器2 { 属性：值；}
   2）注意点：通用兄弟选择器必须通过~连接、通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有被隔开都可以选中。

序选择器（最具代表性的选择器）

1. 同级别的第几个：
   1）格式：标签名称:first-child { 属性：值；}
   2）注意点：不区分类型。
   :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开始递增。比如三倍数......
   
   
   

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

   
   

   
   

2. 同类型的第几个：
   1）格式：标签名称:first-of-type { 属性：值；}
   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)选中同级别同类型的所有偶数标签。
   
   
   

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

   

   

属性选择器：根据指定的属性名称找到对应的标签，然后设置属性。

1. 格式：标签名称[属性名称] {属性：值；}、
   标签名称[属性名称=value] {属性：值；}
2. 最常见的应用场景，就是用于区分input属性。
   
   

   

通配符选择器：给当前界面上所以的标签设置属性。

1. 格式：* {属性：值；}
2. 注意点：由于通配符选择器是设置界面上所有的标签属性，那么就会在设置之前遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差，所以在企业开发中一般不会使用通配符选择器。

CSS选择器

原文：https://www.cnblogs.com/Shuangyi/p/11200267.html