CSS——选择器及三大特性

目录

• CSS常用选择器
  • 标签选择器
  • id选择器
  • 类选择器
    • id选择器和类选择器的区别
  • 后代选择器
  • 子元素选择器
    • 后代选择器和子元素选择器之间的区别
  • 交集选择器
  • 并集选择器
  • 兄弟选择器
    • 相邻兄弟选择器
    • 通用兄弟选择器
  • 序选择器
  • 属性选择器
  • 通配符选择器
  • a标签伪类选择器
• CSS三大特性
  • 继承性
  • 层叠性
  • 优先级
    • ！important
    • 权重问题

标签选择器

跳转到目录

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

  标签名称{
      属性:值;
  }
  

• 注意点

1. 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2. 标签选择器无论标签藏得多深都能选中
3. 只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)

id选择器

跳转到目录

• 什么是id选择器? 作用: 根据指定的id名称找到对应的标签,然后设置属性.
• 格式

  #id名称{
      属性:值;
  }
  

• 注意点

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

   必成高富帅
   

2. 在同一个界面中id的名称是不可以重复的
3. 在编写id选择器时一定要在id名称前面加上#
4. id的名称是有一定的规范
5. 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的

类选择器

跳转到目录

• 什么是类选择器? 作用: 根据指定的类名称找到对应的标签,然后设置属性.
• 格式

  .类名{
  	属性:值;
  }
  

• 注意点

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

   必成高富帅
   

2. 在同一个界面中class的名称是可以重复的.
3. 在编写class选择器时一定要在class名称前面加上
4. 类名的命名规范和id名称的命名规范一样
5. 类名就是专门用来给CSS设置样式的
6. 在HTML中每个标签可以同时绑定多个类名

id选择器和类选择器的区别: 跳转到目录

• id相当于人的身份证不可以重复; class相当于人的名称可以重复
• 一个HTML标签只能绑定一个id名称; 一个HTML标签可以绑定多个class名称
• id选择器是以#开头; class选择器是以.开头
• id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式
• 一般情况下在开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

后代选择器

跳转到目录

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

  标签名称1 标签名称2{
  	属性:值;
  }
  } -->
  

• 注意点

1. 后代选择器必须用空格隔开
2. 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3. 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器

   .para p{
     	color: red;
    }
   .para #iii{
   	color: blue;
   }
   

4. 后代选择器可以通过空格一直延续下去,找到指定的子标签

   div ul li p{
     	color: red;
    }
   

5. code

   我是段落
   
       我是段落
       我是段落
       
           
               
               我是段落
           
           
               我是段落
           
       
   
   我是段落
   

子元素选择器

跳转到目录

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

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

• 注意点

1. 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2. 子元素选择器之间需要用>符号连接, 并且不能有空格
3. 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4. 子元素选择器可以通过>符号一直延续下去

   #gzy>ul>li>p{
   	color: cyan;
   }
   

后代选择器和子元素选择器之间的区别: 跳转到目录

• 后代选择器使用空格作为连接符号; 子元素选择器使用>作为连接符号
• 后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…; 子元素选择器只会选中指定标签中, 也就是只会选中特定的儿子标签。
• 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
• 后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
• 如何选择?
  • 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
  • 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

交集选择器(了解)

跳转到目录

• 什么是交集选择器? 作用: 给所有选择器选中的标签中相交的那部分标签设置属性.
• 格式

  选择器1选择器2{
  	属性:值;
  }
  

• 注意点

1. 选择器和选择器之间没有任何的连接符号
2. 选择器可以使用标签名称/id名称/class名称

并集选择器

跳转到目录

• 什么是并集选择器? 作用: 给所有选择器选中的标签设置属性.
• 格式

  选择器1,选择器2{
  	属性:值;
  }
  

• 注意点

1. 并集选择器必须使用,来连接
2. 选择器可以使用标签名称/id名称/class名称

   .ht,.para,#zy{
   	color: green;
   }
   

3. code

   我是标题
   我是段落
   我是段落
   我是段落
   

兄弟选择器

• 相邻兄弟选择器 (CSS2) 跳转到目录
  • 什么是相邻兄弟选择器? 作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性.
  • 格式

    选择器1+选择器2{
    	属性:值;
    }
    

  • 注意点 1.相邻兄弟选择器必须通过+连接 2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
• 通用兄弟选择器(CSS3) 跳转到目录
  • 什么是通用兄弟选择器? 作用: 给指定选择器后面的所有选择器选中的所有标签设置属性.
  • 格式

    选择器1~选择器2{
    	属性:值;
    }
    

  • 注意点 1.通用兄弟选择器必须用~连接 2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

序选择器

跳转到目录

• 什么是序选择器? 作用: 选中指定的任意标签然后设置属性.
• 格式
  • 同级别的第几个(这里的同级别是指标签是否嵌套)

    标签名:first-child 选中同级别中的第一个标签
    标签名:last-child 选中同级别中的最后一个标签
    标签名:nth-child(n) 选中同级别中的第n个标签
    标签名:nth-last-child(n) 选中同级别中的倒数第n个标签
    标签名:only-child 选中父元素中有唯一的标签
    

  • 同类型的第几个

    标签名:first-of-type 选中同级别中同类型的第一个标签
    标签名:last-of-type  选中同级别中同类型的最后一个标签
    标签名:nth-of-type(n) 选中同级别中同类型的第n个标签
    标签名:nth-last-of-type(n)  选中同级别中同类型的倒数第n个标签
    标签名:only-of-type 选中父元素中唯一类型的某个标签
    

• code

      
          p:first-child{      /* 设置同级别中的第一个标签 */
              color: red;
          }
          p:first-of-type{    /* 设置同级别中同类型的第一个标签 */
              color: blue;
          }
          p:last-child{       /* 设置同级别中的最后一个标签 */
              color: red;
          }
          p:last-of-type{     /* 设置同级别中同类型的最后一个标签 */
              color: blue;
          }
          p:nth-child(2){     /* 设置同级别中第二个标签 */
              color: red;
          }
          p:nth-of-type(3){   /* 设置同级别中同类型第三个标签 */
              color: blue;
          }
          p:nth-last-child(2){    /* 设置同级别中倒数第二个标签 */
              color: red;
          }
          p:nth-last-of-type(2){  /* 设置同级别中同类型倒数第二个标签 */
              color: blue;
          }
          p:only-child{       /* 设置父元素中有唯一的标签 */
              color: red;
          }
          p:only-of-type{     /* 设置父元素中唯一类型的某个标签 */
              color: blue;
          }
      
  

• 其他用法

  标签名:nth-child(odd) 选中同级别中的所有奇数
  标签名:nth-child(even) 选中同级别中的所有偶数
  标签名:nth-of-type(odd) 选中同级别中同类型的第奇数个标签
  标签名:nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增
  

  p:nth-of-type(2n+0){
      color: red;
  }
  p:nth-of-type(2n+1){
     	color: blue;
  }
  

属性选择器(了解)

跳转到目录

• 什么是属性选择器? 作用: 根据指定的属性名称找到对应的标签, 然后设置属性.
• 格式

  
  标签名[attribute]
  作用:根据指定的属性名称找到对应的标签, 然后设置属性
  
  标签名[attribute=value]
  作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性最常见的应用场景, 就
  是用于区分input属性
  

  input[type=password]{	
  }
  

通配符选择器(了解)

跳转到目录

• 什么是通配符选择器? 作用: 给当前界面上所有的标签设置属性.
• 格式

  *{
      属性:值;
  }
  

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

a标签伪类选择器

跳转到目录

• 什么是a标签的伪类选择器? a标签的伪类选择器是专门用来修改a标签不同状态的样式.

• 格式 :link 修改从未访问过状态下的样式 :visited 修改被访问过的状态下的样式. :hover 修改鼠标悬停在a标签上状态下的样式. :active 修改鼠标长按状态下的样式.
• 注意点

1. a标签的伪类选择器可以单独出现也可以一起出现
2. a标签的伪类选择器如果一起出现,有严格的顺序要求, 顺序遵守爱恨原则 love hate l -> link v->visited h->hover a->active

• 经验

1. 开发中编写a标签的伪类选择器最好写在标签选择器的后面
2. a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
3. a标签文字/背景相关的都写在伪类选择器中

CSS三大特性 继承性

跳转到目录

• 什么是继承性？(也就是在标签嵌套中最内层的标签可以继承外层标签设置的样式) 作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性.
• 注意点

1. 并不是所有的属性都可以继承，只有以color/font-/text-/line-开头的属性才可以继承。
2. 在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承
3. 一些特例

   a标签的文字颜色和下划线是不能 继承的 h标签的文字大小是不能继承的

• 应用场景 一般用于设置网页上的一些共性信息, 例如网页的文字颜色,字体,文字大小等内容 body{}

层叠性

跳转到目录

• 什么是层叠性? 作用: 层叠性就是CSS处理冲突的一种能力.
• 注意点 层叠性只有在多个选择器选中"同一个标签",然后又设置了"相同的属性", 才会发生层叠性.

  
      p{
          color: red;
      }
      .para{
          color: blue;
      }
  
  

  我是段落
  

优先级

跳转到目录

• 什么是优先级? 作用: 当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定.
• 优先级判断的三种方式
  • 间接选中就是指继承

    如果是间接选中,那么就看谁离目标标签最近就听谁的.

    /* 是蓝色 */
    ul{
       color: red;
    }
    li{
       color: blue;
    }  
    

  • 相同选择器(直接选中)

    如果都是直接选中,并且都是同类型的选择器,那么就是谁写在后面听谁的 注: 直接选中,包括直接设置该标签选择器/id选择器/类选择器

    /* 是greenyellow色 */
    p{
      color: red;
    }
    p{
      color: greenyellow;
    } 
    

  • 不同选择器(直接选中)

    如果都是直接选中,并且不是相同类型的选择器,那么就会按照选择器的优先级来层叠. 优先级: id > 类 > * > 继承来的 > 浏览器默认

    /* id > 类 > * > 继承来的 > 浏览器默认 */
    #identity{
        color: teal;
    }
    .para{
        color: purple;
    }
    p{
        color: blue;
    }
    *{
        color: yellow;
    }
    li{
        color: red;
    }
    

  
      
          我是段落
      
  
  

• 注意点

1. 间接选中就是通过继承来访问到标签
2. 直接选中就是通过标签名称、id选择器、类选择器来访问到该标签

• ！important 跳转到目录
  • 什么是!important 作用: 用于提升某个直接选中标签的选择器的某个属性的优先级,可以将指定属性的优先级提升到最高. 注意点
  1. !important只能用于直接选中, 间接选中的标签使用无效
  2. 通配符选择器选中的标签也是直接选中的(因为会遍历界面上的所有选择器)
  3. !important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
  4. !important必须写在属性值得分号前面
  5. !important前面的感叹号不能省略

     /* 此时为蓝色 */
     #identity {
           color: teal;
           font-size: 30px;
     }
     .para {
           color: purple;
     }
     p {
           color: blue !important;
           font-size: 10px;
     }
     

• 权重问题 跳转到目录
• 什么是优先级的权重?(只有id,类,标签选择器才计算权重) 作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高.
• 权重的计算规则

  1.首先先计算选择器中有多少个id, id多的选择器优先级最高 2.如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高 3.如果类名的个数一样, 那么再看 标签名称 的个数, 标签名称个数多的优先级最高 4.如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的,也就是说优先级如果一样, 那么谁写在后面听谁的

  /* 此时id个数, 类名个数, 标签名称个数也一样.就写后面的,所以是 红色 */
  .box1 li #identity2{
        color: blue;
  }
  #identity1 ul .box2{
        color: red;
  }
  

• 注意点

1. 只有选择器是直接选中标签的才需要计算权重
2. 若都是直接选中标签,则计算权重
3. 直接选中和间接选中, 选择直接选中