结构伪类选择器,伪元素,标准流,浮动-第十天

结构伪类选择器

• 选中单个

  • 选中第n个 :nth-child(n){}

  • 选中第一个 :first-child{}

  • 选中最后一个 :last-child{}

• 选中多个

  • 选中从a个开始 :nth-child(n+a)

  • 选中前a个 :nth-child(-n+a)

  • 选中第a个到第b个 :nth-child(-n+5):nth-child(n+3)

  • 选中偶数 :nth-child(2n){} :nth-child(even)

  • 选中奇数:nth-child(2n-1){} :nth-child(odd)

  • 选中指定的元素类型 :nth-child-type(){}

伪元素

• 每个标签有一对伪元素

  • after
  • before

• 伪元素必写属性content

• 伪元素默认为行内元素

• 权重1

• 伪元素添加在内容的前后

• 单标签没有伪元素,除了img(图片不能正常显示的时候)以外

标准流

• 又称文档流,是浏览器渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素
• 常见的标准流排版规则
  • 块级元素:从上往下,垂直布局,独占一行
  • 行内元素或行内块元素,从走往右,水平布局,空间不够自动折行

浮动

• 属性名:float

• 属性值

  • 属性名	效果
    left	左浮动
    right	右浮动

• 浮动元素会脱离标准流

• 浮动元素比标准流高半个等级,可以覆盖标准流中的元素