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.通用兄弟选择器选择后面某个选择器中的所有标签,无论有没有被隔开都可以选中

原文地址:https://www.cnblogs.com/wangshuyi/p/6858084.html