十二， 标签选择器

1，标签选择器

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

格式：

标签名称{

       属性：值；

}

注意：

1）标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签；

2）标签选择器无论标签藏得多深都能选中；

3）只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)。

2，ID选择器

1）定义

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

2）格式

#id名称{

属性：值；

}

3）注意

（1）每个HTML标签都有一个属性叫做id,也就是说每个标签都可以设置id；

（2）在同一个界面中id的名称是不可以重复的；

（3）在编写id选择器时一定要在id名称前面加上#；

（4）id的名称是有一定的规范的：id的名称只能由字母/数字/下划线；id名称不能以数字开头；id名称不能是HTML标签的名称，如a h1 img......。

（5）在前端开发中id一般留给JS使用，在设置样式的时候不使用id。

3，类选择器

1）定义

可以根据制定的类名称找到对应标签，然后设置属性的选择器我们称之为类选择器。

2）格式

类名{

    属性：值；   

  }

注意：

（1）每个HTML标签都有一个属性叫做class,也就是说每个标签都可以设置类名；

（2）在同一个界面中class的名称是可以重复的；

（3）在编写class选择器时一定要在class名称前面加上"."；

（4）类名的命名规范和id名称的命名规范一样；

（5）类名就是专门用来给CSS设置样式的；

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

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

示例

补充：ID选择器与类选择器的区别

（1）ID不可重复，class可以重复；

（2）一个标签只能绑定一个ID名称，一个标签可以绑定多个class名称；

（3）id选择器以#开头，而class选择器以"."开头；

（4）在前端开发中一般情况下id给JS使用，要注重冗余代码的抽取，可以将一些公共代码抽取到一个类选择器中，然后让标签与这个类选择器绑定即可。

4，后代选择器

1）定义

找到指定标签所有特定的后代标签,设置属性的选择器我们称之为后代选择器。

2）格式

标签名称1 标签名称2{

属性：值；        

}

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

3）注意

（1）后代选择器必须用空格隔开；

（2）后代不仅仅是儿子,也包括孙子/重孙子,只要最终是放到指定标签中的都是后代；

（3）后代选择器不仅仅可以使用标签名称,还可以使用其它选择器；

（4）后代选择器可以通过空格一直延续下去。

5，子元素选择器

1）定义

找到指定标签中所有特定的直接子元素,然后设置属性的选择器我们称之为子元素选择器。

2）格式

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

                  属性：值；

}

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

3）注意点

（1）子元素选择器只会查找该标签下被嵌套的标签,不会查找其他被嵌套的标签；

（2）子元素选择器之间需要用>符号连接,并且不能有空格；

（3）子元素选择器不仅仅可以使用标签名称,还可以使用其它选择器；

（4）子元素选择器可以通过>符号一直延续下去。

补充：后代选择器与子元素选择器的区别

（1）后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号；

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

共同点：

（1）后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器；

（2）后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去。

选择器1>选择器2>选择器3>选择器4{}

如何选择？

如果想选中指定标签中的所有特定的标签,那么就使用后代选择器；如果只想选中指定标签中的所有特定儿子标签,那么就使用子元素选择器。

6，交集选择器（了解）

1）定义

给所有选择器选中的标签中,相交的那部分标签设置属性的选择器我们称之为交集选择器。

2）格式

选择器1选择器2{

属性：值；

}

3）注意：

（1）选择器和选择器之间没有任何的连接符号，即不用用空格隔开；

（2）选择器可以使用标签名称/id名称/class名称；

（3）交集选择器仅仅作为了解,企业开发中用的并不多。

7，并集选择器（了解）

1）定义

给所有选择器选中的标签设置属性的选择器我们称之为并集选择器。

2）格式

选择器1，选择器2{

属性：值；

}

3）注意：

（1）并集选择器必须使用,来连接；

（2）选择器可以使用标签名称/id名称/class名称。

8，兄弟选择器

1）相邻兄弟选择器（CSS2）

给指定选择器后面紧跟的那个选择器选中的标签设置属性的选择器。

2）格式

选择器1+选择器2{

属性：值；

}

3）注意

（1）相邻兄弟选择器必须通过+连接；

（2）相邻兄弟选择器只能选中紧跟其后的那个标签,不能选中被隔开的标签；

4）通用兄弟选择器（CSS3）

格式：

选择器1~选择器2{

属性：值；

}

注意：

（1）通用兄弟选择器必须用~连接；

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

9，序选择器（重点掌握）

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

1）同级别的第几个

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

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

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

: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选中父元素中唯一类型的某个标签

3）补充

:nth-child(odd)选中同级别中的所有奇数

:nth-child(even)选中同级别中的所有偶数

:nth-child(xn+y)

x和y是用户自定义的,而n是一个计数器,从0开始递增。

10，属性选择器

1）定义

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

2）格式

[attribute]

含义：根据指定的属性名称找到对应的标签,然后设置属性；

[attribute=value]

含义：找到有指定属性,并且属性的取值等于value的标签,然后设置属性。

最常见的应用场景,就是用于区分input属性

input[type=password]{}

<input type="text" name="" id="">

<input type="password" name="" id="">

3）属性的取值是以什么开头的

[attribute|=value] CSS2

[attribute^=value] CSS3

区别：

（1）CSS2中的只能找到value开头,并且value是被-和其它内容隔开的；

（2）CSS3中的只要是以value开头的都可以找到,无论有没有被-隔开。

4）属性的取值是以什么结尾的

[attribute$=value] CSS3

5）属性的取值是否包含某个特定的值得

[attribute~=value] CSS2

[attribute*=value] CSS3

区别：

（1）CSS2中的只能找到独立的单词,也就是包含value,并且value是被空格隔开的；

（2）CSS3中的只要包含value就可以找到。

11，通配符选择器

1）定义

给当前界面上所有的标签设置属性的选择器。

2）格式

*{

       属性：值；

}

3）注意

由于通配符选择器是设置界面上所有的标签的属性,所以在设置之前会遍历所有的标签,如果当前界面上的标签比较多,那么性能就会比较差,所以在企业开发中一般不会使用通配符选择器。