• 选择器
    • 元素选择器 == 类型选择器:p,h1,h2,h3,….皆为元素
    • 通配符选择器:*{} 所有元素共用此CSS样式
    • 类选择器:  .xx{}
      • 结合元素选择器
      • 同时使用多个类选择器 用空格隔开
    • ID选择器:    #xx{}
      • 基本类似类选择器
      • 区分大小写
      • id只能使用一次,而类选择器可复用
      • 不能使用多个ID选择器
      • id可作为锚点
    • 属性选择器:xxxx[xxxxx]{  }    -> ->  a[href]{color: red}
      • 更改元素中的某一属性
      • 可多个同时进行    a[href][titile]{color: black}
      • 更具体一点?   a[href=”http://lhzing.com”]{ color: yellow }
      • 完全匹配
      • 部分匹配

        选择 class 属性中包含 important,such as

        皆可
      • 子串匹配属性选择器
        [abc^=”def”] 选择 abc 属性值以 “def” 开头的所有元素
        [abc$=”def”] 选择 abc 属性值以 “def” 结尾的所有元素
        [abc*=”def”] 选择 abc 属性值中包含子串 “def” 的所有元素

        For example

      • 特定属性选择器

    •  后代选择器   使用的是空格选择符
      • 针对固定结构使用属性 :含 em 的所有 h1 会把以下样式应用到该 em

      • 无论嵌套深度:如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。

    • 子元素选择器   使用的是>选择符
      • 相比于后代选择器,范围缩小,只能用一次

      • 结合后代选择器与子选择器

        上面的选择器会选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性。

    • 相邻兄弟选择器     使用的是+选择符
      • 选择相邻兄弟:选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素,实则为直接相连者

    • 注意点
      • 选择器中每一个属性换行,并且利用 “;”结束
      • 选择器的分组
        • 一种CSS样式分配给多个类型时用 “,” 隔开
        • 同类型CSS样式合并起来写
    • 伪类
      • 语法

        OR

        for CSS

      • 锚伪类
      • first-child伪类:选择元素的第一个子元素
        • 匹配第一个<p>元素

        • 匹配所有<p>元素中的第一个<i>元素

        • 匹配第一个<p>元素中作为其子元素的<i>元素

      • lang伪类:文字

      • focus
    • 伪元素
      • 语法

        OR

        for CSS

      •  :first-line

        • 应用于块级元素
        • 下面的属性可应用于 “first-line” 伪元素:

          • font
          • color
          • background
          • word-spacing
          • letter-spacing
          • text-decoration
          • vertical-align
          • text-transform
          • line-height
          • clear
      • :first-letter  首字母
        • 块级元素
        • 下面的属性可应用于 “first-letter” 伪元素:

          • font
          • color
          • background
          • margin
          • padding
          • border
          • text-decoration
          • vertical-align (仅当 float 为 none 时)
          • text-transform
          • line-height
          • float
          • clear
      • 多重伪元素
      • :before   在元素之前插入新内容
      • :after       在元素之后插入新内容
  • CSS高级
    • position
      • absolute:绝对定位,相对于 static 定位以外的第一个父元素进行定位。
      • fixed:绝对定位,相对于浏览器窗口。
      • relative:相对定位,相对于其元素正常位置(默认位置)进行定位。
      • 以上值皆可经由  left , right , top , bottom 属性进一步进行定位。
      • z-index:优先级,负数  <  正数
      • 进阶注意:文档流
    • 对齐
      • 对齐块元素
        • margin 水平对齐