美文网首页
CSS选择器-1

CSS选择器-1

作者: Adagou | 来源:发表于2018-07-17 02:45 被阅读0次

    1. 标签选择器

    1. 什么是标签选择器
    • 作用: 根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性
    • 格式:

    标签名称{
    属性:值
    }

    • 注意点:
    1. 标签选择器选中的是当前界面中素有的标签,而不能单独选中某一个标签
    1. 标签选中器无论标签藏得多深都能选中
    2. 只要是在HTML中的标签就可以作用标签选择器。(h/a/img/ul/ol/dl……)

    2. id 选择器

    1. 什么是id 选择器
    • 作用:根据指定的id名称找到对应的标签,然后设置属性.
    • 格式:
     # id 名称{
    属性:值;
    }
    
    • 注意点:
    1. 每个HTML标签都有一个属性叫做id,也就是说每个标签都可以设置id;
    2. 在同一个界面中id的名称是不可重复的
    3. 在编写id选择器是一定要在id名臣跟前面加上#,
    4. id的名称只能由字母/数字,下划线组成,且id名称不能以数字开头。
    5. id的名称不能和html 的标签名称一样。
    6. 在企业开发中,如果仅仅是为了使用设置样式,我们一般是不会使用id,因为在前端开发中,id是留给js使用的。

    3. 类选择器

    1. 什么是类选择器
    • 作用:根据指定的类名称找到对应的标签,然后设置属性。
    • 格式:
    .类名{
    属性:值;
    }
    
    
    • 注意点:
    1. 每个HTML标签都有一个属性值,叫做class;也就是说每个标签都可以设置类名
    2. 在同一个界面中的class的名称是可以重复的。
    3. 在编写class选择器的时,一定要在class名称前面加上.
    4. 类名的命名规范和id名称的命名规范一样。
    5. 类名就是专门用来给某个特定的标签设置样式的。
      6.在HTML中每个标签可以同时绑定多个类名
      格式:<标签名称 class="类名1 类名2……">

    4 id和class 的区别

    1. 区别:
    • id 相当于人的身份证,不可以重复,class 相当于人的名称,可以重复;
    • 一个HTML标签只能绑定一个id名称,一个HTML标签可以绑定多个class名称;
    1. id 选择器和class 选择器的区别?
    • id选择器是以“#” 开头的。
    • class 是以“.”开头的。
    1. 在企业开发中到底用id选择器还是用class 选择器?
    • id 一般情况是个js 使用的,所以除非特殊情况,否则不要使用id 去设置样式。
    1. 在企业开发中,一个开发人员对类的使用可以看出这个开发人员的技术水平。

    2. 在企业开发中,要注重一个冗余代码的抽取,可以将一些公共的代码抽取到一个公共的类中。

    5 后代选择器

    1. 什么是后代选择器
    • 作用:找到指定标签的所有的特定的后代标签,设置属性。
    • 格式:

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

    • 注意点:
    1. 后代选择器必须用空格隔开;
    2. 后代不仅仅是儿子,也包括孙子/重孙子;只要最终是放在指定标签中的都是后代。
    3. 后代选择器不仅仅可以使用标签名称,还可以使用其他选择器,比如类选择器,id选择器。

    6 子选择选择器

    1. 什么是自匀速选择器?
    • 作用: 找到指定标签中所有特定的直接子元素,然后设置属性。
    • 格式:

    格式:
    标签名称1> 标签名称2 {
    属性:值
    }

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

    1. 注意点
    • 子元素选择器只会查找儿子,不会查找其他被嵌套的标签
    • 子元素选择器之间需要>符号连接,并且不能有空格
    • 子元素选择器不仅仅可以使用标签名称,还可以使用其他选择器,比如类选择器,id选择器
    • 子元素选择器可以通过大于符号,一直延续下去。

    7 后代选择器和子元素选择器的区别

    1. 后代选择器和子元素选择器的区别?
    • 后代选择器使用空格作为连接符号;
    • 子元素选择器使用>作为连接符号;
    • 后代选择器会选中指定标签中,所有的特定后代标签,也就是会选中儿子/孙子……只要是被放到指定标签中的特定标签都会被选中。子元素选择器只会选中指定标签中,所有的特定的直接标签,也就是只会选中特定的儿子标签。
    1. 后代选择器和子元素选择器之间的共同点
    • 两个都可以使用标签名称/id名称/class 名称来作为选择器
    • 两个都可以通过各自的链接符号一直延续下去
    1. 企业开发中如何进行选择
    • 如果想选中指定标签中的所有的特定的标签,那么就是用后代选择器,如果只是想选中指定标签中的所有特定儿子标签,那么就是用子元素选择器。

    相关文章

      网友评论

          本文标题:CSS选择器-1

          本文链接:https://www.haomeiwen.com/subject/qknipftx.html