HTML选择器

什么是标签选择器?

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

格式：
标签名称｛
属性：值
｝
注意点：1. 标签选择器选中当前所有的标签，而不能单独选择某个标签

1. 标签选择器不无多深都能被选中
   3.只要是HTML中的标签就可以作为表亲啊选择器（h/a/img/ul/ol/dl/input....）

id选择器

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

格式：
＃id名称｛
属性：值；
｝
注意点：
1.每个HTML标签都有一个属性叫做id，也就是说每个标签都可以设置id
2.在同一个界面中id的名称是不可以重复的
3.在编写id选择器时一定要在id名称前加上＃
4.id的名称有一定的规范
4.1名称不能以数字开头，只能以字母／数字／下划线组成
4.2id不能以HTML标签名称命名
4.3在开发中一般不会使用id，留给js使用

类选择器

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

格式：
.类名｛
属性：值；
｝
注意点：
大体与id选择器相同，不过类选择器可以重复且类名前加.
在HTML中每个标签可以通时绑定多个类名
格式：<标签名称 class＝“类名1 类名2 ...”>

id和class的区别

1.id相当于身份证不可以重复 class相当于人的名称可以重复
2.一个HTML标签只能绑定一个id名称，一个HTML可以绑定多个class名称
3.class以.开头 id选择器以＃开头
4.一般情况在企业开发中要注意冗余代码的抽取，可以将一些公共代码抽到一个类选择器中，然后让标签和这个类选择器绑定即可

后代选择器

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

格式：
标签名称1 标签名称2｛
属性：值；
｝
先找到所有名叫标签1的标签，然后再在这个标签下面去查找所有名称叫做“标签名称2”的标签，然后设置属性
div p｛｝
注意点：
1.后代选择器必须用空格隔开
2.后代不仅仅是子代，包括子类的子类，只要放在指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称，还可以使用其他选择器
4.后代选择器可以通过空格一直延续下去

子元素选择器

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

标签名称1>标签名称2｛
属性：值
｝
先找到所有名叫标签1的标签，然后再在这个标签中去查找所有名称叫做“标签名称2”的标签，然后设置属性
注意点：
1.子元素只会找到子类，不会查找嵌套的标签
2.用>符号连接，并不能有空高格
3.子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器
3.子元素可以通过>符号一直延续下去

后代选择器和子元素选择器之间的区别？

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

  不同点

• 后代选择器会选中指定标签，所有特定后代标签
• 子元素只会选中指定标签中，所有特定的标签

  相同点

• 都可以使用标签名称／id／class 名称来作为选择器
• 都可以使用各自的连接符号一直延续下去

交集选择器（了解）

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

格式
选择器1选择器2｛
属性：值；
｝
注意点：
1.选择器与选择器之间没有任何连接符号
2.选择器可以使用标签名称也可以使用id/class名称

并集选择器

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

格式：
选择器1,选择器2｛
属性：值；
｝

兄弟选择器

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

格式：
选择器1+选择器2｛
属性：值；
｝
注意点：
1.相邻兄弟选择器必须通过＋连接
2.相邻兄弟选择器职能选中紧跟其后的那个标签，不能选中被隔开的标签

通用选择器

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

格式：
选择器1~选择器2｛
属性：值；
｝
注意点：
1.通用兄弟选择必须用～连接
2.通用兄弟选择器选择后面某个选择器中的所有标签，无论有没有被隔开都可以选中