1. css简介

• 全称：层叠样式表(Cascading Style Sheets)
• 编写位置：
  • 行内，内部，外部
  • 外部：
    • <link rel="stylesheet" href="./xxx.css">

2. css选择器

• 基本选择器
  • 通配选择器 *{}
  • 元素选择器 div{}
  • 类选择器 .header{}
  • id选择器 #gotoTop{}
• 复合选择器
  • 交集选择器 div.header#gotoTop{}
  • 并集选择器 div,.header,#gotoTop{}
  • 后代选择器 div .header{}
  • 子代选择器 div>.header{}
  • 相邻兄弟选择器 div+.header{}
  • 通用兄弟选择器 div~.header{}
  • 属性选择器
    • [属性名] 具有某个属性
    • [属性名="值"] 包含某个属性，且属性值等于指定值的元素
    • [属性名^="值"] 包含某个属性，且属性值以指定值开头的元素
    • [属性名$="值"] 包含某个属性，且属性值以指定值结尾的元素
    • [属性名*="值"] 包含某个属性，且属性值包含指定值的元素
• 伪类选择器
  • 动态伪类
    • :link 未被访问过 （a标签专属）
    • :visited 访问过 （a标签专属）
    • :hover 悬停 （任何元素）
    • :active 激活状态 （所有可点击的元素，除非display:none;或者pointer-events: none;
    • focus 获取焦点（主要用于表单类元素，包括其他：textarea,button）
  • 结构伪类
    • :first-child 所有兄弟元素中的第一个
    • :last-child 所有兄弟元素中的最后一个
    • :nth-child(n) 所有兄弟元素中的第n个
    • :first-of-type 所有同类型兄弟元素中的第一个
    • :last-of-type 所有同类型兄弟元素的最后一个
    • :nth-of-type(n) 所有同类型兄弟元素的第n个
    • 关于n值：
      • 0或不写：什么都选不中
      • n：选中所有
      • 1～正无穷：选中对应序号的子元素
      • 2n或者even：选中序号为偶数的
      • 2n+1或者odd：选中序号为奇数的子元素
      • -n+3: 选中的是前3个
    • nth-last-child(n) 所有兄弟元素中的倒数第n个
    • :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
    • :only-child 选择没有兄弟的元素（独生子女）
    • :only-of-type 选择没有同类型兄弟的元素
    • :root 根元素
    • :empty 内容为空元素（空格也算内容）

546

8