css高级选择器&盒模型

css高级选择器&盒模型

1.组合选择器

• 群组选择器

  /* 每个选择器为可以为三种基础选择器的任意一个，用逗号隔开，控制多个*/
  div,.div,#div{
      color:red
  }

• 后代(子代)选择器

  /*后代选择器:用空格将父级和子级连接*/
  .sup .sub{
      color:red
  }
  
  /*子代选择器:用 > 将父级和子级连接,即父级 > 子级*/
  .sup > .sub{
      color:red
  }

  1.子代选择器是（一级嵌套关系）
  
  2.后代选择器（一级或者多级嵌套关系）

• 兄弟(相邻)选择器

  /*兄弟选择器:用~连接*/
  .up ~ .down{
      color:red
  }
  
  /*相邻选择器:用+连接*/
  .up + .down{
      color:red
  }

  1.相邻选择器必须为直接相邻关系（必须挨着）
  
  2.兄弟选择器可以为直接或者间接相邻关系（必须是同一级，可以相邻，也可以相间）

• 交集选择器

  <div class="ss" id="dd"></div>
  
  div.ss.#dd{
      color:red
  }

2.复杂选择器的优先等级

1.与修饰符位置无关

2.属性选择器与类选择器的优先级相同

3.优先级大前提: id选择器   无限大于    类选择器[属性选择器]   无限大于  标签选择器

4.优先级权重:

            if id个数多,则优先级高,else 判断类选择器个数
            if 类选择器个数多,则优先级高,else 判断标签选择器个数
            if 标签选择器个数多,则优先级高,else 个数和类型均相同则由位置决定
            

3.伪类标签选择器

• a标签四大伪类选择器

  /*悬浮: 鼠标悬浮到链接上，链接显示红色*/
  a:hover{color:red}
  
  /*访问时: 访问链接时,链接显示为绿色*/
  a:active{color:green}
  
  /*未访问: 未访问链接时,链接为蓝色*/
  a:link{color:blue}
  
  /*已访问状态: 访问过链接后,链接为黑色    注意浏览器会有记录*/
  a:visiter{color:black}

• 索引伪类选择器

  /*位置优先: 每层结构中第一取出来，再匹配标签是否是section*/
  section:nth-child(3)
  
  /*类型优先: 每层结构中先取出标签为section,然后在取出的section中匹配位置第一的*/
  section:nth-of-type(1)

  1. 位置: 最后一个为last-child()
  
  2. 类型: 最后一个为last-of-type()

• 取反伪类选择器

  /*先确定对谁取反，然后加上not*/
  :not(nth-child(2))

4.盒模型

# 什么是盒模型？

通配选择器能够控制的页面标签都是盒模型（一般我们操作的都是块级标签）

# 盒模型由什么作用？

页面书写的标签初始状态级别都不能满足显示要求，需要再次再次修改，修改的就是盒模型的各个属性。

# 盒模型组成部分？

content(内容) + padding (内边框) + border (外边框) + margin(边距)

• content（内容）

  1.通过设置 width 和 height 来规定content
  
  2.块级标签可以设置自身宽高,默认宽为父级宽(width=auto),高为0,高度可以由内容决定
  
  3.内联标签不可以设置自身宽高,默认宽高均为0,宽高一定由内容决定
  
  4.是子标签或子内容的显示区域

  # 1.参与盒子显示，颜色为background-color

• padding (内边框)

  # padding 组成:
  
    padding-top|right|bottom|left

  # 1.参与盒子显示,颜色为背景色

• border (外边)

  # border 组成
  1.border-width
  
      border-top|right|tobbom|left-width
  
  2.border-color
  
    border-top|right|tobbom|left-color
  
  3.border-style
  
    border-top|right|tobbom|left-style

  # 1.border: 参与盒子显示,颜色由自己定义（transparent 为透明）

• margin (边距)

  # margin 组成
  
    margin-top|right|bottom|left

  # 1.没有颜色，不参与盒子显示，决定何止布局（位置信息）

• margin坑一：父子联动

  当上下移动子box时，父级的box也会跟着移动

  /*解决方法：固定父级box的dorder或者padding*/
    .sup{
          border-top:1px solid transparent
    }
  /*解决方法二*/
  .sup{
      padding-top:1px ;
  }
  

• margin坑二：上兄弟margin-bottom与下兄弟margin-top重合

  解决方法：只设置一个，建议设置下兄弟的margin-top