CSS标签选择器

1.什么是标签选择器？

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

格式：

标签名{

属性：值；

}

注意点：

1. 标签选择器选定的是当前界面中所有该名称的标签，而不能单独选定某一标签；

2. 标签选择器无论标签藏得多深都能找到；

3. 只要是HTML中的标签都可以作为标签选择器。

2.id选择器

作用：根据指定的id名称找到对应的标签，然后设置属性。

格式：

#id{

属性：值；

}

注意点：

1. 每一个HTML标签都有id属性，也就是说每个标签都可以设置id；

2. 在同一个界面中id是不可重复的；

3. 在编写id选择器的时候id前一定要加#；

4. id的名称是有一定的规范的。

4.1 id的名称只能有字母、数字、下划线组成；

4.2 id名不能以数字开头；

4.3 id名不能是关键字；

4.4 在企业开发中一般如果仅仅是为了设置样式，我们不会使用id，应为id是为了给js使用的。

3.类选择器

作用：根据指定的类名称找到对应的标签，然后设置属性。

格式：

.类名{

属性：值；

}

注意点：

1. 每一个HTML标签都有class属性，也就是说每个标签都可以设置class；

2. 在同一个界面中class是不可重复的；

3. 在编写id选择器的时候class前一定要加.；

4. 类名的命名规范和id命名规范是一样的；

5. 类名就是专门给某个特定的标签设置样式的；

6. 在HTML中每个标签都可以同时绑定多个类名。

格式：

<标签名称 class="类名1 类名2 ...">

特别注解：

一、id和class的区别

1.1 

id相当于身份证，不可重复；

class相当于姓名，可以重复。

1.2

一个HTML标签只能绑定一个id属性

一个HTML标签可以绑定多个class属性

二、id选择器和class选择器的区别？

id选择器以#开头

class选择器以.开头

三、在企业开发中到底使用id选择器还是使用class选择器？

id一般情况下是给js使用的，所以除非特殊情况，否则不要用id去设置样式。

四、在企业开发中，一个开发人员对类的使用可以看出开发人员的水平如何。

一般情况下在企业开发中要注意代码的冗余代码的抽取，可以将一些公共的代码抽取到一个类选择器中。

然后让标签和类选择器绑定即可。

4. 后代选择器

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

格式：

标签名称1 标签名称2{

属性：值；

}

先找名称是标签名称1的标签，然后在这个标签下面找到名称是标签名称2的标签，然后再设置属性。

5. 子元素选择器

作用：找到指定标签的所有特定直接子元素，设置属性。

格式：

标签名称1>标签名称2{

属性：值；

}

注意点：

5.1 子元素选择器只查找儿子，不查找其他嵌套的标签；

5.2 子元素选择器两个标签之间使用>来连接；

5.3 子元素选择器不仅可以使用标签，还可以使用其他选择器；

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

特别注解：

一、后代选择器和子元素选择器的区别？

1. 1

后代选择器用空格连接；

子元素选择器用>连接。

1.2 

后代选择器会指定后代标签中所有的特定后代标签；

子元素选择器只会选中指定标签中所有直接的子元素。

二、 后代选择器和子元素选择器的相同点？

2.1 子元素选择器和后代选择器都可以使用 标签名、类名、id名称来作为选择器；

2.2 后代选择器和子元素选择器都可以通过空格和>一直延续下去。

6. 并集选择器

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

格式：

选择器1，选择器2{

属性：值；

}

7. 兄弟选择器

7.1 相邻兄弟选择器

作用：给指定的选择器后面紧跟的选择器中的标签设置属性。

格式：

选择器1+选择器2{

属性：值；

}

注意点：

1. 两个兄弟必须有相同的父元素

2. 相邻兄弟选择器必须用+连接；

3. 相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签。

7.2 通用兄弟选择器

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

格式：

选择器1~选择器2{

属性：值；

}

注意点：

1. 通用兄弟选择器必须使用~连接；

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

8. 序选择器

8.1 同级别中的第几个

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

：last-child 选中同级别中最后一个标签；

：nth-child（几） 选中同级别中的第几个标签；

：nth-last-child（几） 选中同级别中的倒数第几个标签；

：only-child  选中父元素中唯一的元素。

注意点：不区分类型。

8.2  同类型中的第几个

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

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

：nth-of-type（几）  选中同级别中同类型的第几个标签；

：nth-last-of-type（几）  选中同级别中同类型的倒数第几个标签；

：only-of-type（几）  选中父元素中唯一类型的某个标签。

这个几可以是数字，也可以是单词

单词：

odd 奇数，even 偶数。

：nth-child（xn+y） x和y是用户定义的，n是一个计数器，从零开始递增。