标签：ugo   pre   epp   基本选择器   https   --   span   重点   属性   

前端——CSS的引入方式、选择器

什么是CSS？

层叠样式表（就是用来调节标签的样式）

CSS注释

/*单行注释*/

/*多行注释1
多行注释2
多行注释3
*/

注释的使用

css应该是一个独立的文件

/*页面通用样式*/
/*顶部导航栏样式*/
/*侧边菜单栏样式*/
……

css语法结构

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

css三种引入方式

• 外部css文件（最正规的书写方式）

  /*mycss*/
  /*这是一个非常牛逼的页面的css样式文件*/
  /*公共样式*/
  p {
      color: aquamarine;
  }
  /*外部引用css文件*/
  
  
  
  秦时明月汉时关
  
  
  

• head内style标签内部直接书写css代码

  /*head内style标签内部直接书写css代码*/
  
  
  
  
  
  
  秦时明月汉时关
  
  

• 标签内部通过style属性直接书写对应的样式（不推荐）

  /*标签内部通过style属性直接书写对应的样式*/
  
  
  
  
  
  秦时明月汉时关
  
  

css选择器

基本选择器

• 标签选择器

  
  
  
  
  
  
  我是div我的class为c1       /*---> 变红色*/
      我是div内部的span     /*---> 变红色*/
  
  我是p我的id为d1我的class为c1
  我是div
        /*---> 变红色*/
  我是span我的class为c1
  我是p
  我是span我的id为d2
  
  

• 类选择器：. 属性值 {css样式} 重点：一定记住是.号

  
  
  
  
  
  
  我是div我的class为c1       /*---> 变蓝色*/
      
  我是div内部的span     /*---> 变蓝色*/
  
  我是p我的id为d1我的class为c1
          /*---> 变蓝色*/
  我是div
  我是span我的class为c1      /*---> 变蓝色*/
  我是p
  我是span我的id为d2
  
  

• id选择器：#id值{css样式} 重点：一定记住是#号

  
  
  
  
  
  
  我是div我的class为c1
      
  我是div内部的span
  
  我是p我的id为d1我的class为c1
          /*---> 变黄色*/
  我是div
  我是span我的class为c1
  我是p
  我是span我的id为d2
  
  

• 通用选择器：{css样式} 重点：**** 号

  
  
  
  
  
  
  我是div我的class为c1       /*---> 变绿色*/
      
  我是div内部的span     /*---> 变绿色*/
  
  我是p我的id为d1我的class为c1
      /*---> 变绿色*/
  我是div
        /*---> 变绿色*/
  我是span我的class为c1      /*---> 变绿色*/
  我是p
          /*---> 变绿色*/
  我是span我的id为d2        /*---> 绿色*/
  
  

组合选择器(重点记住特殊符号)

• 后代选择器

  
  
  
  
  
  
  div上面的span
  
  div上面的span
  
      div内部第一个span     /*---> 变红色*/
      
  div内部的p
          
  div内部的p的span /*---> 变红色*/
      
      div内部最后一个span        /*---> 变红色*/
  
  div下面的span
  
  div下面的span
  
  div下面的span
  
  div下面的span
  
  弟弟舔她
      
  放开那个女孩，让我来！
  
  我会把你活活sao死
  
  

• 儿子选择器

  
  
  
  
  
  
  div上面的span
  
  div上面的span
  
      div内部第一个span     /*---> 变蓝色*/
      
  div内部的p
          
  div内部的p的span
      
      div内部最后一个span        /*---> 变蓝色*/
  
  div下面的span
  
  div下面的span
  
  div下面的span
  
  div下面的span
  
  弟弟舔她
      
  放开那个女孩，让我来！
  
  我会把你活活sao死
  
  

• 毗邻选择器

  
  
  
  
  
  
  div上面的span
  
  div上面的span
  
      div内部第一个span
      
  div内部的p
          
  div内部的p的span
      
      div内部最后一个span
  
  div下面的span       /*---> 变绿色*/
  
  div下面的span
  
  div下面的span
  
  div下面的span
  
  弟弟舔她
      
  放开那个女孩，让我来！
  
  我会把你活活sao死       /*---> 变绿色*/
  
  

• 弟弟选择器

  
  
  
  
  
  
  div上面的span
  
  div上面的span
  
      div内部第一个span
      
  div内部的p
          
  div内部的p的span
      
      div内部最后一个span
  
  div下面的span       /*---> 变黄色*/
  
  div下面的span       /*---> 变黄色*/
  
  div下面的span       /*---> 变黄色*/
  
  div下面的span       /*---> 变黄色*/
  
  弟弟舔她
      
  放开那个女孩，让我来！
  
  我会把你活活sao死       /*---> 变黄色*/
  
  

属性选择器（根据属性或属性值来选择标签）

秦时明月汉时关，万里长征人未还
秦时明月汉时关，万里长征人未还
秦时明月汉时关，万里长征人未还

分组与嵌套

找工作，拿高薪，牛皮~~
    
我是h标签

找工作，拿高薪，牛皮~~
你好骚啊~~

伪类选择器

百度
搜狗
撸啊撸

伪元素选择器

奥术大师大所大大所大所大所大

前端——CSS的引入方式、选择器

标签：ugo   pre   epp   基本选择器   https   --   span   重点   属性   

原文地址：https://www.cnblogs.com/aheng/p/12104002.html